如何确保页脚始终位于底部？

Question

作为一个重要的注意事项，我不是指position: fixed;！

当主体较小且不占浏览器大小的全部高度时，页脚只是喜欢在页面中间降温。如果你看看我分享的照片，你就能更清楚地理解我的意思。我试过像body{height: 100%;}这样的东西，但没有用。甚至尝试过：https://css-tricks.com/snippets/css/sticky-footer/和它似乎只是打破它更多(特别是在头版，这不是一个问题。是否有一种方法可以确保身体大小至少总是浏览器的大小？

Answer 1

默认情况下，内容会根据内容进行调整。因此，您可以将内容列的高度设置为css中的屏幕大小。但是只有#content-column { height: ---px; }不能工作，因为它只会将屏幕修复到px，因此您可以使用min-height解决这个问题，如下所示。我已经在我的网站上设置了这个，它运行得很完美。

#content-column { min-height: 500px; }

因此，内容列总是保持在500 be的最小值，这接近于平均屏幕大小，因此，访问者访问您的站点看起来就像填充了整个屏幕，而页脚总是位于底部。如果内容更多，就会相应地进行调整。你可以把px换成你想要的任何东西。

更新-1

现在，使用上面的方法，您可以设置不低于500 go的高度，但是如果默认屏幕大小大于500 go呢？以下评论对此进行了讨论，

您可以使用视图端口单元: vw、vh、vmin、vmax

所以，下面的代码可以解决这个问题，

#content-column {min-height: 100vh}，

1vh = 1% of the screen height在哪里。因此，100 the将覆盖整个屏幕。现在，如果您在html {}或body {}中指定了%，则需要将该值取为100%。

例如，body {font-size: 87.5%;} ->中的bartik或自适应主题，

所以你的代码是，

#content-column {min-height: 87.5vh;}

Answer 2

您可以使用calc()表达式，并使用min-height而不是height。假设您的页脚高度为100 is：

body{
  min-height : 100%;
  min-height: -moz-calc(100% - 100px); /* Firefox */
  min-height: -webkit-calc(100% - 100px); /* Chrome, Safari */
  min-height: calc(100% - 100px); /* IE9+ browsers */
}
footer{
  height: 100px;
}

获取有关calc() 这里的更多信息