Twitter Bootstrap：容器中的 div 高度为 100%
使用 twitter bootstrap (2)，我有一个带有导航栏的简单页面，在 container 内我想添加一个高度为 100% 的 div（到屏幕底部）。我的 css-fu 生锈了，我无法解决这个问题。
简单的 HTML：
<body>
<div class="navbar navbar-fixed-top">
<!-- Rest of nav bar chopped from here -->
</div>
<div class="container fill">
<div id="map"></div> <!-- This one wants to be 100% height -->
</div>
</body>
当前的 CSS：
#map {
width: 100%;
height: 100%;
min-height: 100%;
}
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
编辑 *
我已经按照下面的建议为填充类添加了高度。但是，问题是我在 body 中添加了一个 padding-top 来说明顶部的固定导航栏。这会影响“地图”div 的 100% 高度，并意味着添加了滚动条 - 如下所示：http://jsfiddle.net/S3Gvf/2/ 谁能告诉我如何解决？
将类 .fill 设置为 height: 100%
.fill {
min-height: 100%;
height: 100%;
}
（我为 #map 设置了一个红色背景，因此您可以看到它占据了 100% 的高度）
2019 年更新
在 Bootstrap 4 中，flexbox 可用于获得填充剩余空间的全高布局。
首先，容器（父级）需要是全高的：
选项 1_ 为 min-height: 100%; 添加一个类。请记住，如果父级具有定义的高度，则 min-height 仅起作用：
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
https://codeply.com/go/dTaVyMah1U
选项 2_ 使用 vh 单位：
.vh-100 {
min-height: 100vh;
}
https://codeply.com/go/kMahVdZyGj
同样在 Bootstrap 4.1 中，vh-100 和 min-vh-100 类包含在 Bootstrap 中，因此不需要额外的 CSS
然后，在容器上使用 flexbox 方向列 d-flex flex-column，并在要填充剩余高度的任何 child div（即：row）上使用 flex-grow-1。
另请参阅：
Bootstrap 4 Navbar and content fill height flexbox
Bootstrap - Fill fluid container between header and footer
How to make the row stretch remaining height
height:100% 不仅消耗了底部高度的其余部分，而且消耗了 100% 的视口高度，从而创建了一个垂直滚动条。这就是为什么地图需要在接受的答案中滑到底部的原因。
这很简单。您可以使用
.fill .map
{
min-height: 100vh;
}
您可以根据需要更改高度。
box-sizing:border-box;以获得简单的解决方法