CSS -不能有符合屏幕高度的div。
CSS -不能有符合屏幕高度的div。
提问于 2017-11-30 12:11:38
在下面我有两个div容器。
容器1，它包含一个google，如下所示：
<div class="container">
<div class="mapCanvas2" #mapCanvas2></div>
</div>CSS
.container{
height: 64%;
width: 100%;
}
.mapCanvas2{
position:relative;
height: 100%;
width: 100%;
}容器2
.container2{
height: 36%;
width: 100%;
}问题：
在一些屏幕上，(取决于其高度)，在容器2下面显示一个空白以隐藏它，我必须将.container的高度值设置为67%或以上，这当然不是一个解决方案。
回答 1
Stack Overflow用户
发布于 2017-11-30 12:16:45
您可以使用flex，通过指定flex:1，使第二个容器填充剩余的空间：
body {
height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
}
.container {
height: 30%;
background: red;
}
.container-2 {
flex: 1;
background: blue;
}<div class="container">
<div class="mapCanvas2" #mapCanvas2> map </div>
</div>
<div class="container-2"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47573205
复制相关文章
相似问题
腾讯云开发者
