Question

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

编辑*

我已按照下面的建议为填充类添加了高度。但是，问题在于我在主体上添加了一个填充顶部以考虑顶部的固定导航栏。这会影响“map”div的100％高度，这意味着会添加滚动条 - 如下所示：http://jsfiddle.net/S3Gvf/2/任何人都可以告诉我如何修复？

Answer 1

将班级.fill设为height: 100%

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

JSFiddle

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

Answer 2

更新2018年

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

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

选项1_为dados_SKU3.set_index('CodeNumber', inplace = True) dados_SKU4.set_index('CodeNumber', inplace = True)添加一个类。请记住，如果父级具有已定义的高度，则min-height将仅工作：

min-height: 100%;

https://www.codeply.com/go/dTaVyMah1U

选项2_使用html, body { height: 100%; } .min-100 { min-height: 100%; }单位：

vh

https://www.codeply.com/go/kMahVdZyGj

然后，在容器上使用flexbox方向列.vh-100 { min-height: 100vh; }，在要填充的任何子 div（即：d-flex flex-column）上使用flex-grow-1剩余高度。

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

Answer 3

你需要将padding-top添加到“fill”元素，再加上box-sizing：border-box - sample here bootply

Answer 4

这很简单。您可以使用

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

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

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

4 个答案: