如何在底部保留(绝对）页脚

How to keep (absolute) footer at the bottom?

本文关键字：绝对 页脚 保留 底部      更新时间：2023-09-26

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

<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（高度：自动）中，内容是绝对的，因此这些内容不包括在 main 的高度中（我只是猜测这个），这就是为什么 main 的高度是 0，因为页脚出现了。这是我的实际问题。

使用 bottom:0 ：

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

请记住，要使bottom正常工作，您必须按照:)所述指定position

如果您使用 position:fixed ，当您滚动时，页脚仍将在页面底部可用，但它取决于您的要求。

如果我理解正确，你需要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/演示

相关文章：