Bootstrap jumbotron完整浏览器高度问题答案

【问题标题】：Bootstrap jumbotron full browser height issueBootstrap jumbotron完整浏览器高度问题
【发布时间】：2015-02-20 19:32:20
【问题描述】：

按照下面的代码，我有一个 Bootstrap Jumbotron...

<div class="jumbotron">
     <div class="container">
        content here...
     </div>
</div>

css 确保 jumbotron 找到浏览器高度并像这样填充它......

html,body {
height:100%;
}

.jumbotron {
height:100%;
}

我的固定导航栏的高度为 60px，我希望 jumbotron 有一个 margin-top: 60px 所以它从导航“下方”开始，而不是在导航“后面”。

问题是 - 这会在我设置的 100% 高度上为 jumbotron 的底部添加 60px 的边距。如何删除它自动添加到浏览器底部的 60px 边距？

【问题讨论】：

【解决方案1】：

在使用固定导航栏时，Bootstrap 建议在 body 上使用using top padding：

body {
    padding-top: 60px; /* set this equal to navbar's height */
}

docs中提到了这个

需要身体填充

固定的导航栏将覆盖您的其他内容，除非您添加填充到 .尝试您自己的价值观或使用我们的 sn-p 下面。提示：默认情况下，导航栏的高度为 50px。

【讨论】：