时间戳

首页 > 解决方案 > How do you stretch a div element to the footer?

html - How do you stretch a div element to the footer?

问题描述

My goal was to get the footer to stay at the bottom of the page and to go further down when more content is added. In doing so, a div element on my page which follows the footer has stopped half way when there isn't enough content.

My question is, how do you get the middle-stripdiv to stretch to the footer and have the goal above still achievable.

Here is a simplified JSFiddle to show the issue.

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>

标签： htmlcss

解决方案

您可以使用 flexbox 来实现：

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

#middle-strip {
  flex: 1;
}

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

推荐阅读