包装器无法使用HTML
我正在尝试为一个作业编写一些html，但是当我尝试这段代码时，紫色部分与标题重叠。最终我意识到这是因为100%是从header div继承的，即使它是关闭的。你有没有办法让紫色进入导航栏？我不能删除百分比高度，当你在它，也许是一个修复的事实，即标题是独立于导航栏包装器无法使用HTML,html,css,nav,Html,Css,Nav,我正在尝试为一个作业编写一些html，但是当我尝试这段代码时，紫色部分与标题重叠。最终我意识到这是因为100%是从header div继承的，即使它是关闭的。你有没有办法让紫色进入导航栏？我不能删除百分比高度，当你在它，也许是一个修复的事实，即标题是独立于导航栏 <html> <head> <style type="text/css"> body { margin-top: 0px; margin-r
<html>
<head>
<style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header {
color: blue;
text-align: center;
height: 70px;
font-family: "Comic Sans MS", cursive, sans-serif;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(-45deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(135deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
a {
color: orange;
text-decoration: none;
}
li {
display: inline;
}
.main {
width: 32%;
height: 100%;
background-color: #FF66CC;
overflow:auto;
}
#nav {
background-color: lightblue;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<h1>Header</h1>
<div id="nav">
<ul>
<li><a href="">Dog</a>   </li>
<li><a href="">Cat</a>   </li>
<li><a href="">Bird</a>   </li>
<li><a href="">Fish</a>   </li>
<li><a href="">Robot</a>   </li>
<li><a href="">Snake</a>   
<br /></li></ul></div><p><br /></p>
</div>
<div id="wrapper">
<div class="main">
<p>Stique condimentum. Proin gravida felis eros, id hendrerit mi scelerisque pharetra. In ultricies pharetra semper. Suspendisse potenti. In risus lectus, pretium id tempus at, blandit at leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu arcu id arcu eleifend accumsan eget vitae sapien. Sed sit amet felis non elit hendrerit pharetra et a tortor. Etiam at vehicula sapien. Donec volutpat est vel massa placerat, in mollis lorem aliquet. Proin convallis, tortor vel pellentesque laoreet, leo ligula venenatis orci, at porttitor diam tellus non felis. Quisque gravida, nibh vel posuere mattis, dui quam rhoncus felis, ut luctus erat risus et justo.tae egestas. Quisque posuere malesuada faucibus. Nulla molestie fermentum elit, vel rhoncus purus. Nunc porttitor sed magna non ultricies. Integer congue congue mollis. Nunc mollis ac nisl sit amet pellentesque. Proin feugiat eros justo, eu egestas purus pretium quis. Mauris risus nisl, mattis ut justo eu, pellentesque tincidunt leo. Mauris fermentum suscipit nunc et aliquam. Ut quis tempor odio. Phasellus ante nisl, interdum iaculis facilisis a, pretium quis elit. Sed sit amet metus id tortor cursus euismod. Proin bibendum augue a tellus adipiscing dictum. Fusce ac ante sit amet lectus auctor suscipit sed eget dolor. Vestibulum vel laoreet purus. Nullam a porttitor neque.
Cras magna metus, aliquam et metus id, tincidunt blandit justo. Maecenas blandit, nunc et iaculis mattis, odio leo pharetra velit, quis dictum sem leo ac lorem. Duis gravida suscipit nibh, ut consequat turpis blandit quis. Integer vitae orci ullamcorper, tempor enim non, elementum sem. Morbi quis nisl urna. Vestibulum sagittis rutrum eros, eu bibendum tortor posuere a. Donec et purus at sem sagittis laoreet at quis odio. Nullam nisl odio, interdum id varius in, pharetra eu nisi.
Nam scelerisque eros sit amet pellentesque aliquam. Sed dui massa, malesuada vel euismod non, placerat id diam. d hendrerit mi scelerisque pharetra. In ultricies phare.</p>
</div>
</div>
</body>
</html>
嘿，回答得好，我会把浮子放在左边，主舱和导航舱。绝对位置也可以，但我喜欢流体布局 你有
#header {
height: 70px;
}
这导致导航栏处于危急状态，因为导航是标题的子项。根据需要更改高度，您将获得解决方案。例如，117px的高度适用于桌面屏幕。您必须重新排列HTML和Css，如下所示： 基本上，使导航浮动： 建议，如果可以的话：
清理HTML结构，它似乎也有点不起作用。您可以发布HTML代码吗。类似于？浮动这两个div将在大屏幕上使页面的nav向左移动，.main向右移动。
#header {
height: 70px;
}
#nav {
float: right;
width: 68%;
[....your code....]
}