如何将div元素拉伸到页脚？

Question

我的目标是让页脚停留在页面底部，并在添加更多内容时进一步下降。这样一来，当内容不足时，页面上跟随页脚的div元素就会停止一半。

我的问题是，如何使middle-strip div扩展到页脚并实现上述目标。

这里是简化的JSFiddle来显示问题。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#container {
  min-height: 100%;
  position: relative;
}

#header {
  background: #283343;
  height: 50px;
}

#middle-strip {
  padding-bottom: 100px;
  background: #32cd32;
  width: 500px;
  margin: auto;
}

#content-area {
  width: 400px;
  height: 100%;
  margin: auto;
}

#footer {
  background: #283343;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
}

<div id="container">
  <div id="header">
    THIS IS THE HEADER
  </div>
  <div id="middle-strip">
    <div id="content-area">
      THIS IS WHERE THE CONTENT WILL GO
    </div>
  </div>
  <div id="footer">
    THIS IS THE FOOTER
  </div>
</div>

Answer 1

您可以使用flexbox实现此目的：

#container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#middle-strip {
  flex: 1;
}

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/