将页脚推到页面底部

【问题标题】：Push footer to the bottom of the page将页脚推到页面底部
【发布时间】：2016-02-01 00:52:38
【问题描述】：

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

内容块是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/

【问题讨论】：

标签： html css position footer absolute

【解决方案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 像素高...

【讨论】：