css - 底部的页脚 - 100% 高度

Question

我正在这个网站上工作 - http://agencymaiclientpages.com/phononic/cms/

其中一个要求是页脚位于页面底部。我知道 body 和 html 需要 height:100% 值，但无论我尝试哪种组合(内容区域内有多个元素)——它都不起作用。我尝试将所有主要内容都设置为 100%，什么都没有，在堆栈中尝试了几个元素，仍然没有。我究竟做错了什么？或者，我错过了什么？

我什至尝试删除一些元素 (#primary)，这样堆叠就不会那么“高”，但页脚要么在屏幕下方(因此需要滚动)，要么保持在主要内容区域下方。

Answer 1

您需要固定定位。这将确保您的页脚位于页面底部:

.site-footer {
  position:fixed;
  bottom:0;
  width:100%;
  max-width:100%;
}

但要小心，如果窗口高度“小”，它会切断主要内容。所以根据你的主要内容，你只能在一定的垂直高度之后应用固定定位，例如这样的:

@media (min-height:600px) {
  /*fixed positioning here*/
}