Question

我正在使用包含 overflow：hidden; 的包装器创建网页，这是一个带有 float：left; ，内容和页脚的导航列。我在导航栏中添加了填充，因此它的背景颜色到达包装器的末尾，并将包装器设置为 overflow：hidden; ，因此它将扩展与导航列匹配。问题是我无法让页脚走到最底层。

CSS

#nav{
    background:skyblue;
    padding:8px 8px 350px 8px;
    font-weight:bold;
    float:left;}

#wrapper{
    width:80%;
    min-width:960px;
    background:#90C7E3;
    box-shadow: 8px 8px 8px gray;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;}

#footer{
    font-size:75%;}

HTML

  <body>
    <div id="wrapper">
      <div id="nav">
        <ul>
          <li><a href="home.html">H</a>
          <li><a href="a.html">A</a>
          <li><a href="b.html">B</a>
          <li><a href="c.html">C</a>
         </ul>
       </div>
       <div id="content">
         <h2>content</h2>     
         <p>contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p>
       </div>
       <div id="footer">
         <p>footerfooterfooterfooterfooter<br>
         <em>footerfooterfooter</em></p>
       </div>
     </div>
  </body>

我不确定我是否正确发布了该代码，因为这是我第一次在本网站上发布。

Answer 1

使用clear：两者都在页脚中。

My fiddle

  #footer{
 font-size:75%;
clear:both;}

Answer 2

您可以为页脚使用margin-top属性 JsFiddle链接：http://jsfiddle.net/L5REZ/

   #footer{
        margin-top:40%;
        font-size:75%;
    }

Answer 3

您可以尝试使用

<div id="footer">
  <p>footerfooterfooterfooterfooter<br>
  <em>footerfooterfooter</em></p>
</div>
<br><br>

就在</body>标记之前这里有一些JSfiddle code

Answer 4

添加

 #footer
{
   font-size:75%;
   float: left;
   width: 100%;
}

Answer 5

您也可以尝试：

#footer {
  width:100%;
  height:80px; /* Need a fixed height */
  position:absolute; /* Sets the position on a set spot */
  bottom:0; /* Tells the footer div to stay at 0 which is the bottom of the page */
}

无论内容有多远，这都会将页脚向下推。

来源：http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

希望这有帮助！祝你好运。

如何强制页脚到溢出的包装底部：隐藏;？

5 个答案: