Twitter Bootstrap：容器中的div高度为100％

129

使用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%;
}

编辑*

我将高度添加到填充类，如下所示。但是，问题是我在主体上添加了padding-top来解决顶部的固定导航栏。这会影响“地图” div的100％高度，并意味着添加了滚动条-如此处所示：http : //jsfiddle.net/S3Gvf/2/谁能告诉我如何解决？

css twitter-bootstrap height

— 马特·罗伯茨
source

1

因此，您只想在所有方向上拉伸该div？

— 安德烈斯·伊利希

1

是的，我希望它填充导航div之后剩下的空间

— Matt Roberts

129

将课程设置.fill为height: 100%

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

JSFiddle

（我将其设置为红色背景，#map以便您看到它占据了100％的高度）

— 霍伦
source

谢谢，稍后再试，然后报告。不敢相信我错过了这个简单的解决方法：）

— 马特·罗伯茨

2

谢谢，这种工作，但是固定位置的twitter bootstrap nav使地图偏离了底部-您需要滚动到底部。我不知道如何使div跨度到整个可用屏幕空间减去导航栏。

— 马特·罗伯茨

2

jsfiddle.net/S3Gvf/4使用box-sizing:border-box;与填充（body标签），用于简单的解决方法在元件上

— 贺联

1

我不太确定css3 voodoo的工作原理，但是可以工作:)非常感谢！

— 马特·罗伯茨

1

在此示例中，＃map实际上被隐藏在导航栏后面。

— 空灵

37

更新2019

在Bootstrap 4中，flexbox可用于获取充满剩余空间的完整高度的布局。

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

选项1_为添加一个类min-height: 100%;。请记住，最小高度仅在父级具有定义的高度时才起作用：

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

然后，利用Flexbox的方向柱d-flex flex-column在容器上，并且flex-grow-1在任何儿童的div（即：row）要填补剩余的高度。

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

— 齐姆
source

为什么这两种方法似乎都与简单地创建一个占用窗口底部其余部分的第二个容器有悖常理？在上面给定的空间中，开发人员应该具有灵活性，可以使用引导程序来完成他们想要的任何事情。

— klewis

您真的认为这值得一票吗？“仅创建一个第二个容器，它占据了窗口底部的其余高度” ..您有一个如何工作的示例吗？整个问题height:100%不只是消耗了其余的底部高度，而是消耗了100％的视口高度，从而创建了一个垂直滚动条。这就是为什么地图需要在已接受的答案中滑到底部。

— Zim

您是这些BootStrap表格上受人尊敬的开发人员。我没有投票给你，别人却给了你。我对您的回答感到惊讶，因为您的大多数回答都获得了高票。我希望我有一个如何工作的例子。我还没有发现任何东西，但是如果flexbox确实有一种简单的方法可以将剩余的元素填充到页面底部，那将是很好的。感谢您尝试提供答案，我只是假设我们在那里可以轻松实现这一目标。我猜不是:)

— klewis

1

好的，如答案“在容器上使用flexbox方向列d-flex flex-column，在要填充其余高度的任何子div（即行）上使用flex-grow-1”所述...亲本是100％的高度作为解释

— 以星

3

这很简单。您可以使用

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

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

— 苏米特·库玛·古普塔（Sumit Kumar Gupta）
source

1

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

— 马梅齐托
source