如何使用粘性页脚将引导 3 容器设置为浏览器高度的 100%？

Posted 2023-03-06

【中文标题】如何使用粘性页脚将引导 3 容器设置为浏览器高度的 100%？

【英文标题】：How to set a bootstrap 3 container to 100% of browser height with a sticky footer?

【发布时间】：2015-03-01 03:07:03

【问题描述】：

如标题所述，如何使用粘性页脚将引导 3 容器（包装器）设置为浏览器窗口高度的 100%？

BootPly

更新：

粘性页脚工作正常，这是我需要 100% 高度的第一个 '<div class="container">'

【问题讨论】：

可能以前回答过？ ***.com/search?q=bootstrap+sticky+footer

Twitter Bootstrap 3 Sticky Footer的可能重复

我更新了我的问题 - 也许还不够清楚。粘性页脚很好~这是我需要 100% 高度的容器。

这是一个很好的工作示例：bootply.com/panchroma/70755

这不是以前回答的问题，问题不在于页脚，而是容器 div 需要 100% 高度。

【参考方案1】：

您可以将页面高度设置为 100%，然后将页脚放在底部，并留出高度的边距。

喜欢这里：http://getbootstrap.com/examples/sticky-footer-navbar/

首先将其添加到您的 css 中：

html 
  position: relative;
  min-height: 100%;

为页脚添加这个

.footer 
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;

【讨论】：

这解决了粘性页脚 - 有效，问题是关于设置容器的高度，如果你看一下 bootply 示例，它是我需要 100% 高度的第一个容器。