将页脚推到页面底部

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 元素本身没有高度。因此需要将其设置为与内容相同。然后footer根据最近的定位元素定位，也是因为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 像素高...

将页脚推到页面底部

Push footer to the bottom of the page

html

css

position

footer

absolute