让 div 贴在页面底部

Question

所以我创建了一个联系页面，我希望页脚 div 在联系表格之后不紧贴在页面底部。

但是，如果我将所有内容放入容器 div 和 height:100%; 并制作页脚 bottom:0; 那么页面将“太长”，你必须滚动，等等。 ..

我的 css 到目前为止：

 #footer{
    background-color:#fff;
    font:bold 14px;
    color:#1E88E5;
    width:100%;
    height:auto;
    padding:1%;
    border-top:1px solid #1E88E5;
}

页脚只是一个正常的全宽 div 带有一些居中的文本 atm。

原文由 mheonyae 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 display: flex 轻松做到这一点。你不关心身高 body 或 wrapper 标签。

示例： 如果需要，请更改 main tag 任何值， footer 始终粘在底部（不是 position: fixed ）。

https://codepen.io/tronghiep92/pen/dzwRrO

HTML 标记

<div id="wrapper">
   <header>my header</header>
   <main>main content, please change height</main>
  <footer>
    my footer
  </footer>
</div>

CSS 解决方案

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

header {
  height: 100px;
  background: yellow;
}

footer {
  height: 50px;
  background: red;
  margin-top: auto; /* this is the solution */
}

main {
  height: 100px
}

或者您可以：

 #wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

header {
  height: 100px;
  background: yellow;
}

footer {
  height: 50px;
  background: red;
}

main {
  flex: 1;
  height: 100px;
}

原文由 nghiepit 发布，翻译遵循 CC BY-SA 3.0 许可协议