Twitter Bootstrap：100％高度的容器中的div
使用twitter引导（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%;
}
如下所示，我已将高度添加到填充类中。 但是，问题在于我在主体上添加了一个填充顶部来解释顶部的固定导航栏。 这影响了“地图”div的100％高度，并且意味着滚动条被添加 - 如下所示：http://jsfiddle.net/S3Gvf/2/谁能告诉我如何解决？
设置类.fill到height: 100%
.fill {
min-height: 100%;
height: 100%;
}
的jsfiddle
（我为#map放置了一个红色背景，这样你就可以看到它占据了100％的高度）
你需要添加padding-top到“fill”元素，再加上box-sizing：border-box - sample here bootply
2018年更新
在Bootstrap 4中 ，flexbox可用于获取填充剩余空间的完整高度布局。
首先，容器需要全高：
选项1_为min-height: 100%;添加一个类min-height: 100%; 。 请记住，如果父级具有定义的高度，则最小高度仅适用于：
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
https://www.codeply.com/go/dTaVyMah1U
选项2_使用vh单位：
.vh-100 {
min-height: 100vh;
}
https://www.codeply.com/go/kMahVdZyGj
然后，在容器上使用flexbox方向列d-flex flex-column ，并在要填充剩余高度的任何子div（即： row ）上使用flex-grow-1 。
另请参阅：Bootstrap 4 Navbar和内容填充高度flexbox
链接地址: http://www.djcxy.com/p/88261.html