使页脚停留在页面底部并被内容推动

Question

[每当我从头开始制作网页时，我遇到的最烦人的地方就是使页脚停留在底部[[适当。 Web困扰着页面，页脚在高清晰度屏幕上的中间位置显得笨拙。

谈论此的热门问题：

• Fix footer to bottom of page
• How do you get the footer to stay at the bottom of a Web page?

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

是否有[[any

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

在我正在使用的应用程序中，我使用@media来区分它在移动设备和台式机上的外观，但发现100vh并非always移动设备上的完整视图端口（讨论[C0 ]）。经过一番摆弄之后，我开始使用它（就我的Google Chrome开发者控制台而言）。

（（页眉和页脚是反应组件）

here

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

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

Answer 1