Twitter Bootstrap：div在容器与100％的高度 [英] Twitter Bootstrap: div in container with 100% height
问题描述
使用twitter bootstrap（2），我有一个简单的页面，有一个导航栏，并且在容器里面我想添加一个100％高度的div屏幕底部）。
Using twitter bootstrap (2), I have a simple page with a nav bar, and inside the container I want to add a div with 100% height (to the bottom of the screen). My css-fu is rusty, and I can't work this out.
简单的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%;
}
- EDIT *
我已经在下面建议的填充类中添加了height。但是，问题是，我添加一个padding-top到身体，以解决在顶部的固定导航栏。这会影响地图div的100％高度，这意味着添加了滚动条，如下所示： http://jsfiddle.net / S3Gvf / 2 / 任何人都可以告诉我如何修复
I've added height to the fill class as suggested below. But, the problem is that I add a padding-top to the body to account for the fixed navbar at the top. This affects the 100% height of the "map" div and means that a scrollbar gets added - as seen here: http://jsfiddle.net/S3Gvf/2/ Can anyone tell me how to fix?
推荐答案
设置类 .fill 到 height：100％
.fill {
min-height: 100%;
height: 100%;
}
（我为 #map 添加红色背景， 100％height）
(I put a red background for #map so you can see it takes up 100% height)
这篇关于Twitter Bootstrap：div在容器与100％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
