Bootstrap: 100% 高度的集装箱

使用 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/有人能告诉我如何修复吗？

526876 次浏览
小开
最佳答案

将类 .fill设置为 height: 100%

.fill {
min-height: 100%;
height: 100%;
}

JSFiddle

(我为 #map设置了一个红色背景，这样你就可以看到它占据了100% 的高度)

小开

您需要在“ fill”元素中添加 paddingtop，另外还需要在这里添加 box-size: orders-box-sample 滴答滴答

小开

2019年最新情况

在 鞋带4，柔性箱可以用来得到一个 满了高度布局，填补剩余的空间。

首先，集装箱 (家长)必须是全高的:

选项1 _ 为 min-height: 100%;添加一个类。请记住，如果父代具有定义的高度，那么 min-height 将使 只有工作:

html, body {
height: 100%;
}


.min-100 {
min-height: 100%;
}

Https://codeply.com/go/dtavymah1u

备选方案2 _ 使用 vh单位:

.vh-100 {
min-height: 100vh;
}

Https://codeply.com/go/kmahvdzygj

同样在 Bootstrap 4.1中，vh-100和 min-vh-100类也包含在 Bootstrap 中，因此不需要额外的 CSS

然后，在容器上使用柔性方向列 d-flex flex-column，在任何想要填充剩余高度的 孩子 div (即: row)上使用 flex-grow-1。

参见:
自举4导航栏和内容填充高度弹性箱
Bootstrap-在页眉和页脚之间填充流体容器
如何使行拉伸剩余高度

小开

很简单，你可以用

.fill .map
{
min-height: 100vh;
}

你可以根据自己的要求改变身高。


提交答案