Bootstrap 3：最小高度问题：100%答案

【问题标题】：Bootstrap 3: Issue with min-height: 100%Bootstrap 3：最小高度问题：100%
【发布时间】：2014-05-31 13:06:10
【问题描述】：

所以我正在使用 Bootstrap 中的布局 (see here) 将单页网站拆分为不同的内容部分。我希望每个部分都填充导航栏下方的屏幕。我也在使用 Bootstraps 固定导航栏navbar-fixed-top。我遵循了 Bootstrap 的建议，在 <body> 的顶部添加 50px 填充

  body {
    padding-top: 50px;
  }

这应该说明隐藏在固定导航栏下方的每个部分的部分。

我遇到的问题是在页面加载时一切正常（每个部分都填满了屏幕）但是，如果我单击导航中的任何菜单项 - 相应的 <section id> 默认返回隐藏部分导航栏下方的部分。我最终使每个部分在距视口底部大约 50 像素处结束。

有什么想法吗？

【问题讨论】：

标签： css html twitter-bootstrap height sections

【解决方案1】：

应用此 CSS

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

【讨论】：

所以虽然这会导致内容框填满整个屏幕，但不幸的是它增加了 100% 以上。即我必须滚动一点过去才能看到下一部分。理想情况下，每个部分都只会填满屏幕，而不是更多——如果有意义的话
如果你在正文上应用内容框，我已经改变了我的答案，那么它完全符合你的要求。
啊啊啊这么近。我已经应用了您的解决方案，现在每个部分都填满了屏幕，但是每个部分也填充在导航栏后面。顺便说一句，这不是一个大问题——我只是想知道是否有一种简单的方法可以解决这个问题。谢谢

【解决方案2】：

为什么不将padding-top:50px 添加到每个部分而不是添加到body

问题与您使用每个部分的 id 作为锚点引用这一事实有关，因此它被推到正文的顶部 - 另一种方法是给每个部分 position:relative 然后添加给每个带有position:absolute;top:-50px; 的锚元素并使用它们进行导航。

【讨论】：

向每个部分添加 padding-top:50px 会限制我对每个部分中内容的控制。现在我希望内容（几行文本）出现在每个部分的中心，所以我添加了一个 padding-top: 100px 到
。您的绝对定位替代解决方案将作为备用解决方案，但如果可能的话，我更喜欢需要更少代码的解决方案。