如果页面超出正常高度，则页脚会浮动

Question

我在下面得到效果。蓝线是页脚。当页脚上方的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>

我在中间DIV中使用flex-grow的原因是即使没有太多内容，也要确保页脚位于窗口的底部。

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