Twitter Bootstrap：容器中的 div 高度为 100%答案

【问题标题】：Twitter Bootstrap: div in container with 100% heightTwitter Bootstrap：容器中的 div 高度为 100%
【发布时间】：2012-07-25 13:07:06
【问题描述】：

使用 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/ 谁能告诉我如何解决？

【问题讨论】：

所以你只想向各个方向拉伸那个 div？
是的，我希望它填充导航 div 之后留下的空间

标签： css twitter-bootstrap height

【解决方案1】：

将类.fill设置为height: 100%

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

JSFiddle

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

【讨论】：

谢谢，稍后会尝试并报告。不敢相信我错过了那个简单的修复:)
谢谢，这种方法有效，但是固定位置的 twitter 引导导航会使地图脱离底部 - 您需要滚动到底部。我不知道如何使 div 跨越整个可用屏幕空间减去导航栏。
jsfiddle.net/S3Gvf/4 在元素上使用 box-sizing:border-box; 填充（主体标签），以便轻松解决
我不太确定 css3 voodoo 是如何工作的，但它确实有效 :) 非常感谢！
在本例中，#map 实际上隐藏在导航栏后面。

【解决方案2】：

2019 年更新

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

首先，容器(parent)需要全高：

选项 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，并在要填充剩余高度的任何 child div（即：row）上使用 flex-grow-1。

另见：
Bootstrap 4 Navbar and content fill height flexbox
Bootstrap - Fill fluid container between header and footer
How to make the row stretch remaining height

【讨论】：

为什么这两种方法似乎都与简单地创建第二个容器来占据窗口底部高度的其余部分相反？开发人员应该可以灵活地在上述给定空间中使用引导程序做任何他们想做的事情。
你真的认为这值得一票否决吗？ “只需创建第二个容器，它占据了窗口底部高度的其余部分”..你有一个如何工作的例子吗？重点是height:100% 不只是消耗底部高度的其余部分，而是消耗视口高度的 100%，从而创建一个垂直滚动条。这就是为什么地图需要在接受的答案中滑到底部。
您是这些 BootStrap 表单上备受尊敬的开发人员。我没有对你投反对票，是别人投的。我只是对您的回答感到惊讶，因为您的大多数回答都得到了高度评价。我希望我有一个例子来说明它是如何工作的。我还没有找到任何东西，但是如果 flexbox 确实有一种简单的方法可以将元素的其余部分填充到页面底部，那就太好了。感谢您尝试提供答案，我只是假设我们在那里很容易实现这一点。我猜不是:)
好的，如答案中所述“在容器上使用 flexbox 方向列 d-flex flex-column，在要填充的任何子 div（即：行）上使用 flex-grow-1剩余高度”... 父级是 100% 的高度，正如所解释的那样

【解决方案3】：

这很简单。你可以使用

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

您可以根据自己的需要改变高度。

【讨论】：

【解决方案4】：

您需要将 padding-top 添加到 "fill" 元素，并添加 box-sizing:border-box - 示例bootply

【讨论】：