3

我想将页脚保持在页面底部，同时保持绝对位置，具有以下页面结构：

<div id="head"> </div> //want to keep its size auto and always on the top (position absolute) 
<div id="body"> </div> //the children of #body have position absolute (keep size auto)
<div id="foot"> </div> //want to keep this at the bottom (just below body , if body size 
                         changes then footer will also change (position absolute)

我怎样才能做到这一点？

编辑

我想我不清楚我的问题，抱歉，但我的实际问题是在#main (height: auto) 中的内容是绝对的，所以这些内容不包括在 main 的高度中（我只是在猜这个）多数民众赞成在为什么 main 的高度是 0 因为这个页脚出现了。这是我的实际问题。

4

2 回答 2

5

使用bottom:0：

#foot {
  position:absolute; /* your requirement, you can also use fixed though */
  bottom:0;
  /* your other possible styles */
}

请记住，bottom要工作，您必须position按照您所说的那样指定 :)

如果您使用，当您滚动position:fixed时，页脚仍然会出现在页面底部，但这取决于您的要求。

于 2012-06-09T10:25:28.010 回答
3

如果我理解正确，您需要position:fixed而不是绝对的..

#head {
    position:fixed;
    height:30px;
    top:0;
    left:0;
    right:0;
}
#foot{
    position:fixed;
    height:40px;
    bottom:0;
    left:0;
    right:0;
}

#body{
    padding-top:30px; /* the same as the #head height*/
    padding-bottom:40px; /* the same as the #foot height*/
}

演示在http://jsfiddle.net/ZXMTR/

于 2012-06-09T10:33:24.710 回答