我希望实现以下问题的相反行为:CSS推Div到页面底部。也就是说,当内容溢出到滚动条时,我希望页脚位于页面底部,就像Stack Overflow一样。

我有一个div id="footer"和下面的CSS:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

这将把div移动到视口的底部——但即使你向下滚动页面,元素也会留在那里,所以它不再在底部。

我怎么能确保div保持在页面的内容底部,即使当内容溢出?我不寻找固定的位置,只寻找元素在所有内容的底部。

图片:


当前回答

我意识到它说不要用这个来“回复其他答案”,但不幸的是,我没有足够的代表在适当的答案上添加评论(!),但是……

如果你在asp.net中遇到来自“My Head Hurts”的答案的问题,你需要添加“height: 100%”到主要生成的FORM标签以及HTML和BODY标签中,以使其工作。

其他回答

这正是定位:fixed的设计目的:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

这是小提琴:http://jsfiddle.net/uw8f9/

如果你有一个固定高度的页脚(例如712px),你可以用js这样做:

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}

如果我可以的话,我会评论,但我还没有权限,所以我会张贴一个提示作为答案,对于一些android设备上的意外行为:

定位:固定只适用于Android 2.1到2.3使用以下元标签:

<meta name="viewport" content="width=device-width, user-scalable=no">.

看到http://caniuse.com/搜索=位置

你没有合上你的;后位:绝对。 否则,您上面的代码将完美地工作!

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}

我在页脚上打了一个边距:auto,它做到了!我在这里评论,只是以防它可以帮助任何未来的游客。