Question

站点结构如下 - 有一个共同的单元（内容），它包含站点的所有元素和第二个单元，一个页脚将被压在站点的底部。

内容块为position: absolute，用于对齐中心（水平） - 当屏幕均匀左右并离开其边框时，缩小屏幕。问题在于，使用这种块结构，页脚不会压在页面底部。这是代码：

＆＃13;

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;
}

＆＃13;

<div class = "a_wrapper">
    <div class = "a"></div>
</div>
<div class = "b">
</div>

＆＃13;

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像素高......

将页脚推到页面底部

1 个答案: