如何将(绝对)页脚保持在底部?

Kin*_*ong 3 javascript css jquery html5 css3

我希望将页脚保持在页面底部,同时保持绝对位置,具有以下页面结构:

<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)
Run Code Online (Sandbox Code Playgroud)

我怎样才能做到这一点?

编辑

我想我不清楚我的问题,对不起,但我的实际问题是在#main(高度:自动)内容是绝对的,所以这些内容不包括在主的高度(我只是猜测这个)那是为什么主要的高度是0因为这个页脚出现了.这是我的实际问题.

Sar*_*raz 5

用途bottom:0:

#foot {
  position:absolute; /* your requirement, you can also use fixed though */
  bottom:0;
  /* your other possible styles */
}
Run Code Online (Sandbox Code Playgroud)

请记住,为了bottom工作,你必须指定position你说的:)

如果您使用position:fixed,滚动时页脚仍然可以在页面底部使用,但它符合您的要求.