Question

我试图将页脚放在浏览器窗口的底部。内容div具有绝对定位，因为其内容的各种变化高度。我已经看了几种不同的方法，但由于某种原因，大多数人打破#content div，页脚在header和content 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

Answer 2

像Fidrizers所说，不应该有绝对定位#content 但由于某些原因，例如特殊的界面设计，它可能很有用。

要创建粘性页脚，来自ryan fait 的解决方法是我所知道的最简单，最稳定的方式：
http://ryanfait.com/sticky-footer/

您可以将其应用于您的布局，并使用#content设置top: 125px; right: 0; bottom: 100px; left: 0绝对值。

重要：现在的问题是，内容可能会消失，具体取决于视口的宽度和高度。我真的不建议这样做，但它可以解决你的问题。

演示：http://jsfiddle.net/ubJAf/2/

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

2 个答案: