Twitter Bootstrap:容器中的 div 高度为 100% [英] Twitter Bootstrap: div in container with 100% height
问题描述
使用 twitter bootstrap (2)，我有一个带有导航栏的简单页面，在 container 中，我想添加一个 100% 高度的 div(到屏幕底部).我的 css-fu 生锈了，我无法解决这个问题.
简单的 HTML:
<div class="navbar navbar-fixed-top"><!-- 从这里切下的导航栏的其余部分--><div class="容器填充"><div id="地图"></div><!-- 这个想要100%的高度-->
当前的 CSS:
#map {宽度:100%；高度:100%；最小高度:100%；}html，正文{高度:100%；}.填 {最小高度:100%；}- 编辑 *
我已经按照下面的建议为填充类添加了高度.但是，问题是我在正文中添加了一个 padding-top 以解决顶部的固定导航栏.这会影响地图"div 的 100% 高度，意味着添加了一个滚动条 - 如下所示:http://jsfiddle.net/S3Gvf/2/ 谁能告诉我如何解决?
设置类 .fill 为 height: 100%
.fill {最小高度:100%；高度:100%；}(我为 #map 设置了红色背景，所以你可以看到它占据了 100% 的高度)
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.
Simple 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>
Current CSS:
#map {
width: 100%;
height: 100%;
min-height: 100%;
}
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
- EDIT *
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?
Set the class .fill to height: 100%
.fill {
min-height: 100%;
height: 100%;
}
(I put a red background for #map so you can see it takes up 100% height)
这篇关于Twitter Bootstrap:容器中的 div 高度为 100%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
