Bootstrap jumbotron完全浏览器高度问题

Question

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

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

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

html,body {
height:100%;
}

.jumbotron {
height:100%;
}

我的固定导航栏高度为60px，我希望jumbotron有一个边距顶部：60px所以它开始在＆＃39;下面＆＃39;导航而不是后面的＆＃39;导航。

问题是 - 在我设定的100％高度上，这增加了一个60px的余量到jumbotron的底部。如何删除这个自动添加到浏览器底部的60px边距？

Answer 1

使用固定导航栏时，Bootstrap会在身体上推荐using top padding：

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

docs

中提到了这一点

  

需要身体填充

     

固定的导航栏将覆盖您的其他内容，除非您添加   填充到顶部。尝试自己的价值观或使用我们的   下面的片段。提示：默认情况下，导航栏高50像素。