CSS Twitter Bootstrap：容器中的 div 高度为 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11677886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap: div in container with 100% height
提问by Matt Roberts
Using twitter bootstrap (2), I have a simple page with a nav bar, and inside the containerI 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.
使用 twitter bootstrap (2)，我有一个带有导航栏的简单页面，在里面container我想添加一个 100% 高度的 div（到屏幕底部）。我的 css-fu 生锈了，我无法解决这个问题。
Simple HTML:
简单的 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:
当前的 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?
我已经按照下面的建议为填充类添加了高度。但是，问题是我在正文中添加了一个 padding-top 以解决顶部的固定导航栏。这会影响“地图”div 的 100% 高度，意味着添加了一个滚动条 - 如下所示：http: //jsfiddle.net/S3Gvf/2/谁能告诉我如何解决？
采纳答案by Horen
回答by Zim
Update 2019
2019 年更新
In Bootstrap 4, flexbox can be used to get a fullheight layout that fills the remaining space.
在Bootstrap 4 中，flexbox 可用于获得填充剩余空间的全高布局。
First of all, the container (parent)needs to be full height:
首先，容器（父）需要是全高的：
Option 1_ Add a class for min-height: 100%;. Remember that min-height will onlywork if the parent has a defined height:
选项 1_ 为min-height: 100%;. 请记住， min-height仅在父级具有定义的高度时才有效：
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
https://www.codeply.com/go/dTaVyMah1U
https://www.codeply.com/go/dTaVyMah1U
Option 2_ Use vhunits:
选项 2_ 使用vh单位：
.vh-100 {
min-height: 100vh;
}
https://www.codeply.com/go/kMahVdZyGj
https://www.codeply.com/go/kMahVdZyGj
Then, use flexbox direction column d-flex flex-columnon the container, and flex-grow-1on any childdivs (ie: row) that you want to fill the remaining height.
然后，利用Flexbox的方向柱d-flex flex-column在容器上，并且flex-grow-1在任何儿童的div（即：row）要填补剩余的高度。
Also see:
Bootstrap 4 Navbar and content fill height flexbox
Bootstrap - Fill fluid container between header and footer
How to make the row stretch remaining height
另请参阅：
Bootstrap 4 Navbar 和内容填充高度 flexbox
Bootstrap - 在页眉和页脚之间填充流体容器
如何使行拉伸剩余高度
回答by Sumit Kumar Gupta
It is very simple. You can use
这很简单。您可以使用
.fill .map
{
min-height: 100vh;
}
You can change height according to your requirement.
您可以根据需要更改高度。
