html - 如何将 div 元素拉伸(stretch)到页脚？

Question

我的目标是让页脚停留在页面底部，并在添加更多内容时进一步向下。这样做时，当没有足够的内容时，我的页面上页脚后面的 div 元素会停止到一半。

我的问题是，如何让 middle-stripdiv 延伸到页脚并仍然可以实现上述目标。

这是一个简化的 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/