html - 在一个宽度为 100% 的 div 之后放置宽度为 100% 的页脚

Question

我只是想把我的页脚放在宽度为 100% 的 div 正下方，但如果我使用 position:absolute，它不会是 100% 宽度。

    .box {
    width:100%;
    left:0%;
    height:700px;
    position:absolute;
    margin-top:6%;
    background-image:url();
    background-position-y:90%;
    background-position-x:50%;
}

.footer {
    background-color:#ffffff;
    width:100%;
    height:90px;
    position:absolute;
    bottom:-30%;
    left:0%;
    box-shadow:0px -5px 0px 0px #c72031;
}

HTML:

<div class="box"></div>

<div class="footer"></div>

https://jsfiddle.net/opj984j7/

Answer 1

只需将页脚放在框内并为其指定 bottom: 0; 即可显示，底部没有任何边距。或者要在下方显示，减少页脚高度的 bottom bottom: -90px;:

.box {
  width: 100%;
  left: 0%;
  height: 700px;
  position: absolute;
  margin-top: 6%;
  background: #000;
}
.footer {
  background-color: #ffffff;
  width: 100%;
  height: 90px;
  position: absolute;
  bottom: -90px;
  left: 0%;
  box-shadow: 0px -5px 0px 0px #c72031;
}

<div class="box">
  <div class="footer"></div>
</div>