使用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%;
}
- 编辑*
我已按照下面的建议为填充类添加了高度 . 但是,问题在于我在主体上添加了一个填充顶部以考虑顶部的固定导航栏 . 这会影响"map" div的100%高度,这意味着会添加滚动条 - 如下所示:http://jsfiddle.net/S3Gvf/2/任何人都可以告诉我如何修复?
3 回答
将类
.fill
设置为height: 100%
JSFiddle
(我为
#map
设置了一个红色背景,所以你可以看到它占据了100%的高度)Update 2018
在 Bootstrap 4 中,flexbox可用于获取填充剩余空间的全高布局 .
首先,容器 (parent) 需要是全高:
选项1_为
min-height: 100%;
添加一个类 . 请记住,min-height只有在父级具有已定义的高度时才有效:https://www.codeply.com/go/dTaVyMah1U
选项2_使用
vh
单位:https://www.codeply.com/go/kMahVdZyGj
然后,在容器上使用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
Bootstrap 4: How to make the row stretch remaining height?
你需要添加padding-top到"fill"元素,再加上box-sizing:border-box - 这里示例bootply