Question

我已经尝试了好几个小时现在无法找到解决我问题的方法我已经通过position:fixed;bottom:0;我的页脚粘到了底部但是当我的页脚到达底部时内容更多的是页脚没有相对于内容扩展到底部所以我做了这个做了一个容器div并将我的页脚放在其中

<div id="container">
<div id="body">
</div>
<div id="footer">
</div>
</div>

#container
{
   position:relative;
}
#footer
{
   position:absolute;
   bottom:0;
   height:30px;
}

到目前为止这么好但是当我尝试将我的页脚大小（高度）增加到300PX它占据了我的整个页面时我只想让页脚位于底部且高度相同我甚至尝试制作#body{min-height:500px;}但是我的页脚仍然没有以300px的高度下降。

确切地说，我想要一个类似stackoverflow的页脚，但是当没有内容时，我仍然应该坚持使用最小身高的底部。

Answer 1

您好请点击链接http://jsfiddle.net/cooolkiran/yVC8r/

 <div class="page-wrap"> Content</div>
<footer class="site-footer">
  I'm the Sticky Footer.
</footer>


    * {
      margin: 0;
    }
    html, body {
      height: 100%;
    }
    .page-wrap {
      min-height: 100%;
      /* equal to footer height */
      margin-bottom: -142px; 
    }
    .page-wrap:after {
      content: "";
      display: block;
    }
    .site-footer, .page-wrap:after {
      /* .push must be the same height as footer */
      height: 142px; 
    }
    .site-footer {
      background: orange;
    }

Answer 2

添加：

html, body {height: 100%;}

到你的CSS，看看是否有效。

Answer 3

替换 -

    <div id="container">
    <div id="body">
    </div>
    <div id="footer">
    </div>
    </div>

使用以下代码 - （尝试在页脚分割后关闭div id =“body”）

   <div id="container">
   <div id="body">
   <div id="footer"> 
   </div>
   </div>
   </div>

jsfiddle - http://jsfiddle.net/nMVA5/

Answer 4

试试这个：

<div id="container">
<div id="body">
this is body
</div>
<div id="footer">
this is footer
</div>
</div>

#container
{
border:solid red thin;
position:relative;
height:100px;
}
#footer
{
border:solid red thin;
position:absolute;
bottom:0;
height:30px;
width:100%;
}

演示链接：http://jsfiddle.net/yVC8r/2/

如何将页脚div添加到页面底部？

4 个答案: