Bootstrap 3：最小高度问题：100%
Posted
技术标签:
【中文标题】Bootstrap 3：最小高度问题：100%【英文标题】：Bootstrap 3: Issue with min-height: 100% 【发布时间】：2014-05-31 13:06:10 【问题描述】：所以我正在使用 Bootstrap 中的布局 (see here) 将单页网站拆分为不同的内容部分。我希望每个部分都填充导航栏下方的屏幕。我也在使用 Bootstraps 固定导航栏navbar-fixed-top。我遵循了 Bootstrap 的建议，在 <body> 的顶部添加 50px 填充
body
padding-top: 50px;
这应该说明隐藏在固定导航栏下方的每个部分的部分。
我遇到的问题是在页面加载时一切正常（每个部分都填满了屏幕）但是，如果我单击导航中的任何菜单项 - 相应的 <section id> 默认返回隐藏部分导航栏下方的部分。我最终使每个部分在距视口底部大约 50 像素处结束。
有什么想法吗？
【问题讨论】：
【参考方案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 到以上是关于Bootstrap 3：最小高度问题：100%的主要内容，如果未能解决你的问题，请参考以下文章
具有动态右侧内容的 100% 高度左侧边栏 - Bootstrap + Wordpress
Twitter Bootstrap 100% 高度手风琴“跳跃”
Bootstrap：如何获得具有 100% 高度的另一列的列