Twitter bootstrap：容器中具有100%高度的div
<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>
#map {
width: 100%;
height: 100%;
min-height: 100%;
}
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
- 编辑*
我已经按照下面的建议将height添加到fill类中。但是，问题是，我添加了一个padding-top到身体，以说明固定的navbar在顶部。这会影响“map”div的100%高度，并意味着会添加滚动条--如下面所示:http://jsfidle.net/s3gvf/2/有人能告诉我如何修复吗？
共有1个答案
将类.fill设置为height:100%
.fill {
min-height: 100%;
height: 100%;
}
JsFiddle
（我为#map设置了红色背景，这样您就可以看到它占了100%的高度）
-
问题内容： 使用twitter bootstrap（2），我有一个带有导航栏的简单页面，并且我想在其中添加100％高度的div（到屏幕底部）。我的css- fu生锈了，我无法解决。 简单的HTML： 当前的CSS： 编辑* 我将高度添加到填充类，如下所示。但是，问题是我在主体上添加了padding-top以解决顶部的固定导航栏。这会影响“地图” div的100％高度，并意味着添加了滚动条 问题答案
-
问题内容： 我想让主体具有浏览器高度的100％。我可以使用CSS吗？ 我尝试设置，但不起作用。 我想为页面设置背景色以填充整个浏览器窗口，但是如果页面内容很少，我将在底部看到一个难看的白色条。 问题答案： 尝试将html元素的高度也设置为100％。 Body向其父级（HTML）寻求如何缩放动态属性，因此HTML元素也需要设置其高度。 但是，身体的内容可能需要动态更改。将最小高度设置为100％将实现
-
问题内容： 我想设计一个带有横幅和iframe的网页。我希望iframe可以填满所有剩余的页面高度，并在浏览器调整大小时自动调整大小。是否可以仅使用CSS而无需编写Javascript代码来完成它？ 我尝试在iframe上进行设置，结果非常接近，但是iframe尝试填充整个页面高度，包括banner div元素的高度，因此我得到了不必要的垂直滚动条。这不是完美的。 更新说明 ：对不起，我没有很好地
-
问题内容： 我使用此 CSS将最大高度设置为 谁能给我一个普遍的答案， 和 之间有什么区别？ 问题答案： 这是W3Clink的解释： 以下算法描述了两个属性[min-height和max-height]如何影响’height’属性的使用值： 临时使用的高度是根据上面“计算高度和边距”下的规则计算的（不包括“最小高度”和“最大高度”）。 如果此暂定高度大于“最大高度”，则会再次应用上述规则，但是这次
-
我目前正在为一家公司做一个移动登陆页面。这是一个真正基本的布局，但在标题下方有一个产品的图像，它将永远是100%的宽度（设计显示它总是从边到边）。根据屏幕的宽度，图像的高度显然会相应地调整。我最初用一个img（CSS宽度为100%)，它工作得很好，但我意识到我希望使用媒体查询来为基于不同分辨率的不同图像提供服务-例如，同一图像的小、中、大版本。我知道你不能用CSS改变img src，所以我想我应该
-
在另一个flex容器内的Flexbox列容器在Chrome中没有得到100%的高度，但在Firefox和Edge中都可以。 Codepen示例