Css 引导3：最小高度问题：100%

所以我正在Bootstrap中设计一个布局（），它将一个单页网站拆分为不同的内容部分。我想让每个部分都填满导航栏下面的屏幕。我还使用了引导固定导航条

navbar固定顶
。我遵循Bootstrap的建议，在

这应该解释隐藏在固定导航栏下的每个部分的部分

我遇到的问题是，在页面加载时，一切正常（每个部分填满屏幕），但是，如果我单击导航中的任何菜单项，相应的
默认情况下会将部分部分隐藏在导航栏下方。最后，每个部分从视口底部大约以50px结束

有什么想法吗？
为什么不将
填充顶部：50px
添加到每个部分，而不是添加到
正文中

问题与您使用每个节的
id
作为锚定参考有关，因此它被推到了主体的顶部-另一种方法是为每个节指定
位置：相对
，然后向每个节添加一个锚定元素
位置：绝对；顶部：-50px并将其用于导航。
应用此CSS

body{
    padding-top: 50px;
    webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

因此，虽然这会导致内容框填满整个屏幕，但不幸的是，它添加了略多于100%的内容。i、 e.我必须滚动过折叠部分才能看到下一部分。理想情况下，每个部分只会填满屏幕，不会更多-如果这让唤醒改变了我的答案，如果你在身体上应用内容框，那么它就是你想要的。啊啊啊啊，太近了。我已经应用了您的解决方案，现在每个部分都会填充屏幕，但是每个部分也会填充导航栏后面。顺便说一句，这不是什么大问题——我只是想知道是否有一个简单的解决方法。感谢为每个部分添加一个填充顶：50px限制了我对每个部分内容的控制。现在，我希望内容（几行文本）显示在每个部分的中心&因此，我将添加一个填充顶部：100px。您的绝对定位替代解决方案将作为一个后备方案，但如果可能的话，我更喜欢需要更少代码的解决方案。
body{
    padding-top: 50px;
    webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}