引导 div 100% 高度答案

【问题标题】：bootstrap div 100% height引导 div 100% 高度
【发布时间】：2014-12-23 00:02:03
【问题描述】：

总的来说，我是引导程序和 Web 的新手。我正在开发的应用程序遇到问题。我想要的是有一个带有按钮的顶部栏，下面是一个设置，其中 20% 的左侧填充了一个 div，另外 80% 填充了一个地图。

我可以使用 col-md-2 和 col-md-10 进行分割，但地图没有延伸到 100% 的高度（我会说它大约是 75%。我尝试了许多不同的东西提供在这里和其他地方可以解决 100% 的高度，但似乎没有任何效果。

我把这个放在一起，作为我目前正在尝试的一个例子。我剥离了大部分 CSS，因为它们都不适合我。

http://www.bootply.com/0xx9zBH3Ke

如果您能提供帮助，我将不胜感激。

**编辑我意识到我的 bootply 并没有很好地说明我的问题，所以我将文件扔到下面的链接中以更好地显示发生了什么。

http://ec2-54-186-204-72.us-west-2.compute.amazonaws.com/demo2/bootysample.html

我已经尝试了几个解决方案，但它仍然会因为错过对齐事物而与我作斗争（主要是通过将左窗格作为自己的行）

【问题讨论】：

类似于stackoverflow.com/questions/27571342/…
How can I make Bootstrap columns all the same height?的可能重复

标签： html css twitter-bootstrap-3

【解决方案1】：

尝试为 html 或 body 元素添加 100% 的高度。然后将 20-80% 宽度的 div 包装在包装 div 中，并将其设置为 100% 高度。

【讨论】：

【解决方案2】：

这是你的解决方案

Bootply

#row {
    display: table;
}

#leftpane, #map {
    float: none;
    display: table-cell;
    vertical-align: top;
}

【讨论】：

【解决方案3】：

也许你可以这样使用

.center-element{
     min-height: 100%;
     min-height: 50vh;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
}

唯一的问题是 IE :(

【讨论】：