Question

我不熟悉bootstrap和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

我尝试了几种解决方案，但它仍然会因为错过对齐事物而使我感到困扰（主要是将左撇子作为自己的行放置）

Answer 1

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

Answer 2

这是你的解决方案

Bootply

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

Answer 3

也许你可以像这样使用

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

唯一的问题是IE :(

bootstrap div 100％高度

3 个答案: