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

【问题标题】：Sticky CSS Footer with absolute positioning of previous div具有前一个 div 绝对定位的粘性 CSS 页脚
【发布时间】：2012-06-16 13:16:42
【问题描述】：

我正在尝试将页脚放置在浏览器窗口的底部。内容 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;      
}

【问题讨论】：

标签： css positioning html css-position sticky-footer

【解决方案1】：

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

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

Read when to use absolute and when not to

【讨论】：

当我删除内容 div 的绝对定位时，页脚会出现，但仅在内容 div 中的最后一段内容下方。不会卡在浏览器底部。
你检查过我分享的 jsfiddle。它显然粘在底部的末端。也许你可以提供你自己的 jsfiddle 来解决潜在的问题。
是的，我看到了。我让它在纯 html 和 css 中独立工作，但我认为它与@renderbody 有关。这是在.net 中。它似乎在某些页面上有效，但在其他页面上无效。
把你生成的html放到jsfiddle和css中！！
它会中断，因为它是预编译的 asp.net mvc，所以它没用。我很确定@renderbody 是问题所在。

【解决方案2】：

就像 Fidrizers 说的，应该不需要绝对定位#content。
但出于某些原因，例如特殊的界面设计，很有用。

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

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

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

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

【讨论】：