150

使用 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%;
}
  • 编辑 *

我已经按照下面的建议为填充类添加了高度。但是，问题是我在 body 中添加了一个 padding-top 来说明顶部的固定导航栏。这会影响“地图”div 的 100% 高度，并意味着添加了滚动条 - 如下所示：http: //jsfiddle.net/S3Gvf/2/谁能告诉我如何解决？

4

4 回答 4

136

将班级设置.fill为height: 100%

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

JSFiddle

（我放了一个红色背景，#map所以你可以看到它占据了 100% 的高度）

于 2012-07-26T21:07:16.557 回答
61

2019 年更新

在Bootstrap 4中，flexbox 可用于获得填充剩余空间的全高布局。

首先，容器（父级）需要是全高的：

选项 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

然后，使用容器上的 flexbox 方向列d-flex flex-column，以及要填充剩余高度的flex-grow-1任何子div（即：） 。row

另请参阅：
Bootstrap 4 导航栏和内容填充高度 flexbox
Bootstrap - 在页眉和页脚之间填充流体容器
如何使行拉伸剩余高度

于 2018-05-27T14:57:27.033 回答
8

这很简单。您可以使用

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

您可以根据需要更改高度。

于 2019-05-12T10:07:47.197 回答
1

您需要将 padding-top 添加到“填充”元素，并添加 box-sizing:border-box - 此处为 bootply示例

于 2015-08-17T13:34:33.423 回答