如果页面超出正常高度，页脚浮动答案

【问题标题】：Footer floats if the page goes beyond normal height如果页面超出正常高度，页脚浮动
【发布时间】：2019-07-26 03:44:18
【问题描述】：

我得到了下面的效果。蓝线是页脚。当页脚上方的 DIV 在高度上延伸时，页脚会浮动并且不会延伸到屏幕底部。

body,
html {
  margin: 0px;
  font-family: 'Roboto Condensed', sans-serif;
  height: 100%;
}

.all_content {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

.header {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0082bb;
}

.home_body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: #f0f0f0;
  align: center;
}

.footer {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0082bb;
}

<div class="all_content">

  <!-- header -->
  <div class="header"></div>

  <!-- home body -->
  <div class="home_body" align="center"></div>

  <!-- Footer -->
  <div class="footer"></div>

</div>

我将flex-grow 用于中间 DIV 的原因是为了确保页脚位于窗口底部，即使内容不多。

【问题讨论】：

标签： html css flexbox footer

【解决方案1】：

我没有看到您在布局中描述的浮动效果。

但这里有一个更简洁的代码版本。希望对您有所帮助。

.all_content {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  flex: 0 0 80px; /* flex-grow, flex-shrink, flex-basis */
  background: #0082bb;
}

.home_body {
  flex-grow: 1;
  background: #f0f0f0;
  overflow: auto;
}

.home_body > article {
  height: 2000px;
}

.footer {
  flex: 0 0 50px;
  background: #0082bb;
}

body,
html {
  margin: 0px;
  font-family: 'Roboto Condensed', sans-serif;
}

<div class="all_content">
  <div class="header"></div>
  <div class="home_body">
    <article></article>
  </div>
  <div class="footer"></div>
</div>

【讨论】：