如何使 <footer> 在内容短时粘在屏幕底部，而在内容长时粘在内容底部？答案

【问题标题】：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?如何使 <footer> 在内容短时粘在屏幕底部，而在内容长时粘在内容底部？
【发布时间】：2021-08-10 13:28:42
【问题描述】：

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

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>

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

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

（stackoverflow.com 页脚是我正在考虑的一种）

【问题讨论】：

我在这里遗漏了什么吗？桌面版和移动版在有滚动条和没有滚动条的情况下看起来都很好。
@vanowm 原始网站页脚中包含更多内容，一些网站页面也是如此，在移动设备上这非常不舒服，因为页脚（被固定）一直在屏幕上。我无法复制完整的结构，因为它是一个动态 Web 应用程序。去这里看看实际结构：ide-b87400ce60984c7983e31e7cbafae21f-8080.cs50.ws
也许添加更多关于“桌面”（浏览器，包括版本和操作系统（包括版本）和“移动”（操作系统（包括版本））的信息。

标签： html css footer

【解决方案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;
}

它的作用是使主体至少跨越整个高度，并且它是遵循“flex”系统的子布局。使用 flexbox，您可以为每个孩子指定其行为方式。

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

【讨论】：

不，那个可以去掉，我也忘了说html也需要100%的样式（更新了答案）
当您的内容很少或屏幕较小时，它将不起作用。我检查了您在其中一个 cmets 中链接的网站，页脚不在底部，而是在中间浮动
是的，我自己也注意到了，我在看移动设备，而不是桌面模式。