Question

我正在尝试为分配执行一些html，但是当我尝试此代码时，紫色与标题重叠。最终我意识到这是因为＆＃34; 100％＆＃34;继承自＆＃34;标题＆＃34; div，即使它已关闭。有没有什么方法可以让紫色在导航栏下面？（我不能删除百分比高度）当你在它的时候，也许修复了标题与导航栏分开的事实？

  <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>&emsp;&emsp;&emsp;</li>
            <li><a href="">Cat</a>&emsp;&emsp;&emsp;</li>
            <li><a href="">Bird</a>&emsp;&emsp;&emsp;</li>
            <li><a href="">Fish</a>&emsp;&emsp;&emsp;</li>
            <li><a href="">Robot</a>&emsp;&emsp;&emsp;</li>
            <li><a href="">Snake</a>&emsp;&emsp;&emsp;
            <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>

Answer 1

#wrapper {
    top: 120px;
    position: absolute;
    bottom: 0;
}

Answer 2

你有

#header {
    height: 70px;
}

这导致导航栏处于危急情况，因为 #nav 是 #header 的孩子。
根据需要更改高度，您将获得解。例如， 117px 的height适用于桌面屏幕。

Answer 3

您必须重新排列HTML和Css，如Fiddle：

基本上，使#nav浮动：

   #nav {
    float: right;
    width: 68%;
   [....your code....]
   }

建议，如果可以：

清理HTML结构，似乎有点功能，semantic。

Answer 4

嘿，好的答案我会把浮动放在.main和#nav上。绝对位置也有效，但我喜欢流畅的布局。

包装器不工作HTML

4 个答案: