使用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/有人能告诉我如何修复吗?
发布于 2012-07-27 05:07:17
将类.fill
设置为height: 100%
.fill {
min-height: 100%;
height: 100%;
}
(我为#map
设置了红色背景,这样你就可以看到它占据了100%的高度)
发布于 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
发布于 2019-05-12 18:07:47
这很简单。您可以使用
.fill .map
{
min-height: 100vh;
}
你可以根据你的需要改变高度。
https://stackoverflow.com/questions/11677886
复制相似问题