CSS - 画面の高さで自動フィットするdivを持つことはできません

Question

以下では2つのdivコンテナがあります。

以下のように見えるGoogleマップのdivが含まれているコンテナ1：

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:1 specifingにより、フレックス使用することができます。

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>