嗨,我有一个 CSS 问题,因为我试图将页脚粘贴到页面底部,但它只会将其粘贴到视口的下方,而不是文档的底部。
有人可以帮我理解为什么会这样吗?
我的 css 和 html 非常简单,尽管在阅读了大量示例并尝试之后,我仍然无法让它工作。我不想让我的页脚在包装器内,而不是在它之外,我也不想在包装器上设置 height:100%。
我的 html 如下所示:
<div class="wrapper">
... some content
</div>
<div class="footer">
</div>
我的CSS:
html {
height: 100%;
margin: 0;
padding: 0;
position:relative;
}
body {
position:relative;
height: 100%;
background-color: #D8D8D8;
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Verdana, tahoma, arial, serif;
font-size: 12pt;
}
.wrapper {
position:relative;
margin-left: auto;
margin-right: auto;
width: 1024px;
padding: 6px;
margin-bottom: 30px;
}
.footer {
position: absolute;
bottom:0;
left: 50%;
margin-left: -512px;
height: 25px;
background-color: #E6E6E6;
width: 1024px;
padding: 6px;
clear:both;
}
是否可以使用包装器外部的页脚执行此操作?
我认为在页脚上设置绝对位置意味着它将基于 body 或 html 定位,因为它们是带有 position:relative 的下一个元素,但 bottom:0 似乎只是视口的底部,即使包装器div 远远超出了这个范围,有很多内容。
这样做的结果是,当包装器中有很多内容时,页脚实际上会停留在页面的中间,因为底部被计算为视口的底部。
谢谢