将页脚推送到页面底部

Question

网站结构如下所示 - 有一个公共单元（内容），其中包含网站的所有元素和第二个单元，一个页脚将被压向网站的底部。

内容块为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>

https://jsfiddle.net/0k979ud5/

Answer 1

有两件事情引起这一点 - 因为只使用绝对定位的元素，这需要他们出公文流转中，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个像素高，当然...