html - 如果页面超出正常高度，页脚会 float

Question

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

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>

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

Answer 1

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

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

.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>