站点结构如下-有一个公用单元（内容），其中容纳了站点的所有元素，第二个单元是一个页脚，该页脚将压在站点底部。
内容块position: absolute用于对齐中心（水平）-当屏幕的左右边界一致时，缩小屏幕。问题在于，采用这种块结构时，页脚不会停留在页面底部。这是代码：
body {
margin: 0px;
padding: 0px;
}
.a_wrapper {
width: 600px;
left: 50%;
margin-left: -300px;
position: absolute;
border: 1px dotted #000000;
}
.a {
height: 800px;
}
.b {
width: 90%;
height: 50px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
position: absolute;
border: 1px solid #000000;
}<div class = "a_wrapper">
<div class = "a"></div>
</div>
<div class = "b">
</div>造成此问题的原因有两点-由于仅使用绝对定位的元素（这使它们脱离了文档流），因此body元素本身没有高度。因此，需要将其设置为与内容相同。然后，也由于，将页脚根据最近定位的元素进行定位position: absolute。它是直接父对象body，没有位置，因此将默认为该window对象。为了解决这个问题，body应该给出position: relative：
body {
height: 800px;
position: relative;
padding: 0px;
margin: 0px;
}
.a_wrapper {
width: 600px;
left: 50%;
margin-left: -300px;
position: absolute;
border: 1px dotted #000000;
}
.a {
height: 800px;
}
.b {
width: 90%;
height: 50px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
position: absolute;
border: 1px solid #000000;
}<div class="a_wrapper">
<div class="a"></div>
</div>
<div class="b"></div>页脚应低于内容，body当然必须为850像素高...
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句