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%;
}编辑
- *
我已经按照下面的建议向fill类添加了高度。但是，问题是我在正文中添加了一个填充顶部，以说明顶部固定的导航栏。这会影响"map“div的100%高度，并意味着会添加一个滚动条--如下所示：http://jsfiddle.net/S3Gvf/2/有人能告诉我如何修复吗？
回答 4
Stack Overflow用户
发布于 2012-07-27 05:07:17
将类.fill设置为height: 100%
.fill {
min-height: 100%;
height: 100%;
}(我为#map设置了红色背景，这样你就可以看到它占据了100%的高度)
Stack Overflow用户
发布于 2018-05-27 22:57:27
更新2019
在Bootstrap 4中，可以使用flexbox来获得填充剩余空间的全高布局。
首先，容器父()需要是全高的：
选项1_为min-height: 100%;添加一个类。请记住，仅当父级具有定义的高度时，最小高度才有效：
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}https://codeply.com/go/dTaVyMah1U
Option 2_使用vh单位：
.vh-100 {
min-height: 100vh;
}https://codeply.com/go/kMahVdZyGj
同样在Bootstrap4.1中，vh-100和min-vh-100类也包含在Bootstrap中，因此不需要额外的CSS
然后，在容器上使用flexbox direction column d-flex flex-column，在要填充剩余高度的任何子div(即：row)上使用flex-grow-1。
另请参阅：
Bootstrap 4 Navbar and content fill height flexbox
Stack Overflow用户
发布于 2019-05-12 18:07:47
这很简单。您可以使用
.fill .map
{
min-height: 100vh;
}你可以根据你的需要改变高度。
https://stackoverflow.com/questions/11677886
复制相似问题