CSS - 不能有 div 来自动适应屏幕高度

Question

在下面我有2个Div容器。

容器1 包含一个看起来如下的Google Map Div：

html

  <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％或上方当然不是解决方案。

Answer 1

您可以使用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>