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%;
}
- 编辑*
我将高度添加到填充类，如下所示。但是，问题是我在主体上添加了padding-top以解决顶部的固定导航栏。这会影响“地图”
div的100％高度，并意味着添加了滚动条
问题答案：
将课程设置.fill为height: 100%
.fill {
min-height: 100%;
height: 100%;
}
（我将其设置为红色背景，#map以便您看到它占据了100％的高度）
-
编辑* 我已经按照下面的建议将height添加到fill类中。但是，问题是，我添加了一个padding-top到身体，以说明固定的navbar在顶部。这会影响“map”div的100%高度，并意味着会添加滚动条--如下面所示:http://jsfidle.net/s3gvf/2/有人能告诉我如何修复吗？
-
我希望graph div的高度能够一直延伸到其父（graph容器）容器的末端，但不能超过它。我已经尝试将图形的高度设置为100%和inherit，但这两种设置都会导致图形延伸到父容器的底部边缘（我不想使用overflow:hidden）。有没有办法在图形上设置height属性，使其自动将其高度设置为正确的值？ 当前代码：
-
问题内容： 我希望我的容器div获得其子代高度的最大值。不知道孩子的身高。我正在尝试使用JSFiddle。容器为红色。没有出现。为什么？ 问题答案： 添加以下属性： 这将迫使容器尊重其中所有元素的高度，而不考虑浮动元素。 更新 最近，我正在一个需要此技巧但需要允许溢出显示的项目中工作，因此，您可以使用伪元素清除浮动，从而有效地实现相同的效果，同时允许所有元素上的溢出。
-
问题内容： 我有一个容器div，我想至少拉伸到整个窗口的高度。如果容器div中有很多内容，我希望它可以扩展到大于窗口的高度。这可行。 在容器div中，我有一个图像。图片下方/下方，我有第二个div。我希望此嵌套div垂直拉伸以填充容器div的剩余空间。这行不通。 我试图用这张图来说明问题。我希望div以右图 左侧 所示的方式拉伸，而不是像 右图 右侧所示。 以下是我的代码。如您所见，在这段代码中，
-
问题内容： 我正在尝试使文本的高度为100％，但它不起作用。 它只是成为的100％。 有什么办法让它跟随div的高度吗？ 该高度是整个页面的4％，我wan’t文本跟随它，当你调整大小/分辨率的变化。 问题答案： 为了获得想要的结果，我必须使用以下代码： 谢谢joshuanhibbert @ css-tricks的帮助！
-
问题内容： 我有两列的布局-左和右。 右边有一个灰色，我需要根据用户浏览器窗口的高度垂直扩展它。现在结束于该内容的最后一部分。 我试过，;等 问题答案： 有几个CSS 3度量单位，称为： 什么是视口百分比长度？ 根据上面链接的W3候选推荐书： 视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时，将对其进行相应缩放。 这些单位是（视口高度），（视口宽度），（视口最小长度）和（视口最大