Home / Questions / 134795
Accepted
Pavlo B.
Asked: 2020-01-31 00:59:28 +0800 CST 2020-01-31 00:59:28 +0800 CST

使用 css 保持页脚向下（不固定，不绝对）

  • 772

如何footer始终保持页面底部，但不使用固定或绝对，因为可能会发生以下几种情况：

如果内容不足以填满页面，页脚不会停留在下方，除非您放置position: fixed; bottom: 0或position: absolute; bottom: 0

但是如果我放这两个之一，由于内容大于屏幕，页脚总是可见的，在固定的情况下它会滚动但它总是停留在屏幕上，但在放置绝对的情况下，当它去向下它停留在内容媒体中。

<html>
  <body>
    <header style="background:grey">Header</header>
    <div style="background:yellow">Contenido</div>
    <footer style="background:green">tiene que estar abajo pero no se queda abajo siempre...</footer>
  </body>
</html>

css

1 Answers

  1. Best Answer

    对于布局问题，几乎总是flexbox是解决方案。在这种情况下，您可以将 放置body为容器并占据整个高度并将值flex放入属性display中，您还必须使用垂直排列元素 flex-direction: column；那么内容将具有属性flex: 1（相当于flex: 1 1 0），以便它扩展，占据所有剩余空间。

    我使用与您的示例相同的 HTML，但我会使用div容器来保持body干净。

    body {
  margin:0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

div {
  flex: 1;
}
    <html>

<body>
  <header style="background:grey">Header</header>
  <div style="background:yellow">Contenido</div>
  <footer style="background:green">tiene que estar abajo pero no se queda abajo siempre...</footer>
</body>

</html>

    • 11