让页脚粘在页面底部并被内容推送答案

【问题标题】：Getting the footer to stick to the bottom of the page and get pushed by the content让页脚粘在页面底部并被内容推送
【发布时间】：2020-05-15 03:00:32
【问题描述】：

每当我从头开始制作网页时，我遇到的最烦人的一点是让页脚正确地留在底部。网络上到处都是页脚在高清屏幕上笨拙地位于中间的页面。

讨论这个的热门问题：

我对这些问题的（有效）答案的问题是，它们依赖于事先知道页脚的大小，这会降低网站的响应速度。

是否有任何方法可以将页脚固定在页面底部，该方法适用于任何屏幕并且不依赖于预定义的常量？

在我正在开发的应用程序中，我使用@media 来区分它在移动设备和桌面设备上的外观，但发现100vh 并不是始终移动设备上的完整视图端口（讨论here）。经过一番摆弄，我得到了这个工作（就我的谷歌 Chrome 开发者控制台而言）。

（Header 和 Footer 是 react 组件）

<Header/>
<div className="content">
  <p>Content</p>
<div>
<Footer/>

.content {
    @media screen and (max-width: 738px) {
        min-height: calc(100vh - #{$footer-height-mobile} - 1.92 * #{$navbar-height});
    }
    @media screen and (min-width: 738px) {
        min-height: calc(100vh - #{$footer-height-desktop} - #{$navbar-height});
    }

}

1.92 是唯一给我预期行为的值。再少就会溢出，再多就会在底部留下空白空间。这是一个实际的解决方案，还是只是在 Google Chrome 中发生的事情？

【问题讨论】：

我认为这篇文章中可能有一个解决方案：css-tricks.com/couple-takes-sticky-footer/#article-header-id-3。我之前遇到过你的问题，可以通过 flexbox 解决。
@ChristopheVanassche flexbox 似乎是一个优雅的解决方案，但由于某种原因它不适用于我的应用程序
@ChristopheVanassche 我没有查看正确的父元素。 Flexbox 是要走的路！如果您添加一个不错的答案，我会接受。
很高兴我能帮上忙！
如果我对您有任何帮助，您可以接受我的回答作为您问题的解决方案，这对您有帮助。 ;-) @迈克

标签： html reactjs sass footer

【解决方案1】：

您可以使用 flexbox 使页脚的行为与您提到的一样。 Here 你可以找到一篇关于它的 css-tricks 文章。

我以前也遇到过这个问题，flexbox 是一个非常好的解决方案。但是 IE11 有一个错误，即在使用超大图像时，内容和页脚之间的距离计算错误。但我认为这是可以忽略的。

【讨论】：