Html 让页脚粘到页面底部并被内容推送

每当我从头开始创建一个网页时，我遇到的最烦人的事情就是让页脚正确地停留在底部。网页上有页脚的困扰，页脚在高清晰度屏幕中间尴尬地坐着。

谈论这一点的热门问题：

我对这些问题给出的有效答案的问题是，他们依赖于事先知道你页脚的大小，这使得网站的响应性较差

有没有办法将页脚固定在页面底部，在任何屏幕上都可以使用，并且不依赖于预定义的常量

在我正在开发的应用程序中，我使用@media来区分它在移动和桌面上的外观，但发现100vh并不总是移动讨论的全视图端口。在做了一些修改之后，就我的Google Chrome开发者控制台而言，我让它工作起来了

页眉和页脚是react组件

内容

---

1.92是唯一能让我达到预期行为的值。越少，它就会溢出，越多，它就会在底部留下空白。这是一个实际的解决方案，还是仅仅是在Google Chrome中工作时发生的事情？

您可以通过使用flexbox使页脚的行为与您提到的一样。你可以找到一篇css技巧文章来讨论它

---

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

我认为本文中可能有一个解决方案：。我以前有过你的问题，可以通过flexbox解决。@ChristophenVanassche flexbox似乎是一个优雅的解决方案，但由于某些原因，它在我的电脑上不起作用app@ChristopheVanassche我没有看到正确的父元素。Flexbox是一个不错的选择！如果你能给我一个好答案，我会接受的。很高兴我能帮上忙！如果我能帮忙的话，你会帮我一个忙，接受我的答案作为你问题的解决办法@迈克

.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});
    }

}