Mat*_*rts 120 css height twitter-bootstrap
使用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/有谁能告诉我如何修复？
Hor*_*ren 121
将班级设置.fill为height: 100%
.fill {
min-height: 100%;
height: 100%;
}
(我把红色背景放在一起,#map所以你可以看到它占据了100%的高度)
Zim*_*Zim 24
更新2018年
在Bootstrap 4中,flexbox可用于获得填充剩余空间的全高布局.
首先,容器(父)需要全高:
选项1_为...添加一个类min-height: 100%;.请记住,min-height 只有在父级具有已定义的高度时才有效:
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
然后,d-flex flex-column在容器上使用flexbox方向列,并flex-grow-1在要填充剩余高度的任何子 div(即:)上使用row.
另请参阅:
Bootstrap 4 Navbar和内容填充高度flexbox
Bootstrap - 在页眉和页脚之间填充流体容器
Bootstrap 4:如何使行拉伸剩余高度？