让页脚贴在页面底部并被内容推动

Question

每当我从头开始制作网页时，我运行遇到的最烦人的事情就是让页脚 适当地 留在底部。网络上充斥着页脚在高清屏幕上笨拙地位于中间的页面。

谈论这个的热门问题：

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

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

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

在我正在开发的应用程序中，我使用 @media 来区分它在移动设备和桌面设备上的外观，但发现 100vh 并非 always 移动设备上的完整视图端口（讨论）。经过一些摆弄之后，我让它工作了（就我的 Google 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 是给我预期行为的唯一值。少了就会溢出，多了就会在底部留下空 space 。这是一个实际的解决方案，还是只是碰巧在 Google Chrome 中起作用的事情？

Answer 1

您可以使用 flexbox 使页脚表现得像您提到的那样。 Here 您可以找到一篇讨论它的 css 技巧文章。

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

让页脚贴在页面底部并被内容推动

Getting the footer to stick to the bottom of the page and get pushed by the content

html

reactjs

sass

footer