如何让 <footer> 在内容较短时贴在屏幕底部，在内容较长时贴在内容底部？

Question

我有一个页脚标签（在主标签内的正文标签之后）：

footer {
  text-align: center;
  position: fixed;
  width: 100%;
  background-color: #d9efef;
  height: auto;
  bottom: 0;
}

  <body>
    <main>
      short html content
    </main>
  </body>
  <footer>
    <p>
      Some Text (large amount)
    </p>
  </footer>

在桌面上它的样式相对较好（即使它是固定的而不是在内容之后）。但是在移动设备上，它变得非常高，并且经常出现在屏幕底部很烦人。

如何让页脚一直在内容下方，页面内容较短时也能在屏幕底部？

（whosebug.com 页脚正是我所想的）

Answer 1

您可以为此使用 display: flex。

对于以下标记

<body>
  <main>main content here</main>
  <footer>footer here</footer>
</body>

CSS 将是：

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

main {
  flex: 1 0;
}
footer {
  flex: 0 0;
}

它的作用是让body至少跨越整个高度，并且是children布局遵循'flex'系统。使用 flexbox，您可以为每个 child 指定它应该如何表现。

main 中的 flex: 1 0; 会告诉浏览器让 main 占据尽可能多的位置，并逐渐这样做。而页脚中的 flex: 0 0; 告诉浏览器不要增大页脚。

How can I make <footer> stick to the bottom of the screen when content is short, and to the bottom of content when content is long?