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

时间:2014-04-11 06:24:19

标签: html css css3

我正在使用包含 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>

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

5 个答案:

答案 0 :(得分:1)

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

My fiddle

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

您可以尝试使用

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

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

答案 3 :(得分:0)

添加

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

答案 4 :(得分:0)

您也可以尝试:

#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/

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