css - 具有前一个 div 绝对定位的粘性 CSS 页脚

Question

我试图将页脚放在浏览器窗口的底部。content div 具有绝对定位，因为它的内容具有各种变化的高度。我已经研究了几种不同的方法，但出于某种原因，大多数人打破了#content div，而页脚将自己定位在页眉和内容div之间。有人有什么想法吗？

这是我的html

<div id="header"></div>
  <div id="content">                                                                        
      @RenderBody()                                  
  </div>                              
 <div id="footer"></div> 

这是我的 CSS

#header {
height:115px;
position: relative;
color: #000;
padding-top: 10px;
border-bottom:1px solid #fff;
-moz-box-shadow: 0 0 10px 10px #ccc;
-webkit-box-shadow: 0 0 10px 10px #ccc;
box-shadow: 0 0 10px 10px #ccc;
}

#content {   
width:900px;
height:100%;
margin-top:40px;
margin-left:-450px;
left:50%;
position:absolute;    
}

#footer {
width:auto;
height:100px;
background:#d21f27;
margin-top:5px;
clear:both;
bottom:0;      
}

Answer 1

改变高度不需要绝对位置。

查看答案http://jsfiddle.net/XpKJG/

Read when to use absolute and when not to