定位在网页底部

时间:2011-06-30 07:45:23

标签: css css-position sticky-footer

我有一个奇怪的CSS问题。我有一个横幅,我需要在每页的底部定位。

为此,我将正文设置为position: relative;,将横幅设置为position absolute; bottom: 0px;

问题是我的横幅在不同页面上的位置不同,如下所示: http://www.plotsandhouses.com/node/1http://www.plotsandhouses.com/node/29http://www.plotsandhouses.com/node/30

'custom-page_closure_wrapper'div正是我试图定位在页面底部的内容。我可以通过设置position: fixed;来实现此目的,但我并不总是希望div始终可见 - 只有当页面底部可见或用户向下滚动才能看到它时。

任何人都可以告诉我我缺少的东西吗?

3 个答案:

答案 0 :(得分:2)

您可以尝试在CSS文件中添加以下内容:

body {height:100%;}
#custom-body-wrapper {height:100%;} /*this is the container of your absolute div*/

并删除正文标记上的position:relative

答案 1 :(得分:2)

为了补充Marc的答案,有一个名为Sticky Footer的CSS解决方案。

页脚未“粘贴”到页面底部的原因是因为页脚绝对定位的容器高度不超过视口的高度。因此,通过将容器强制拉伸至最大高度,该技术可确保页脚始终位于底部。

答案 2 :(得分:2)

您可以找到有关该主题here的一些广泛信息。