CSSの高さ位置絶対値なしの100％

Question

1行に3つのdivボックスを表示していますが、それらの高さを100％にしたいとします。私は絶対位置と高さ100％の位置を使用しています。 Boxは100％になりますが、互いに積み重ねられます。しかし、私は彼らのお互いの隣にしたい。

Answer 1

divを100％の高さにするには、bodyとhtml heightも100％に設定する必要があります。

代わりに、ビューポート幅の使用を検討することができます。それらを並べて表示させるには、display：flexを使用することを検討してください。

次のスニペットをチェック

div { 
 
    height: 100vh; 
 
    width:60vw; 
 
} 
 
div:nth-child(1) { 
 
    background: green; 
 
} 
 
div:nth-child(2) { 
 
    background: red; 
 
} 
 
div:nth-child(2) { 
 
    background: pink; 
 
} 
 
.container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
}

<div class="container"> 
 
    <div> 
 
    </div> 
 
    <div> 
 
    </div> 
 
    <div> 
 
    </div> 
 
</div>

それは何の