0

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

2 回答 2

1

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

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

您可以将其应用于您的布局并#content使用top: 125px; right: 0; bottom: 100px; left: 0.

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

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

于 2012-06-13T15:53:57.493 回答
1

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

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

阅读何时使用绝对，何时不使用

于 2012-06-13T14:45:47.437 回答