HTML - 页脚不在底部

Question

我希望将页脚向下推并显示为页面的最后一个元素。然而，由于之前的内容包装器具有 100% 的高度。内容的高度超过浏览器高度。最后，页脚出现在浏览器高度之后，而不是内容包装器之后。我怎样才能改变它并且仍然有 100% 的包装高度，这是背景设计所需要的。

codepen

HTML

<div class="content_wrap">
content wrap
<div class="item">content</div>
</div>
<footer>footer</footer>

CSS

body, html{
  height: 100%;
}

.content_wrap{
  height: 100%;
  width: 100%;

  border: 2px solid black;
}

.item{
  height: 1300px;
  width: 100%;

      background: red;
}

footer{
  height: 100px;
  width: 100%;
  background: yellow;
}

Answer 1

为页脚给出相对的 body position 属性值和 absolute 的 position 属性值 & bottom 值 -(footer Height)

  body {
  height: 100%;
  position: relative;
}
.content_wrap {
  height: 100%;
  width: 100%;
  border: 2px solid black;
}
.item {
  height: 1300px;
  width: 100%;
  background: red;
}
footer {
  height: 100px;
  width: 100%;
  background: yellow;
  position: absolute;
  bottom:-100px; /* minus the height of the Footer and it wont overlap any other element */
}

<div class="content_wrap">
content wrap
<div class="item">content</div>
</div>
<footer>footer</footer>