CSS高度100％无绝对位置

Question

Im在一行中显示3个div框，但我希望它们的高度为100％。当我使用绝对位置和高度100％。该盒子然后到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>

希望它可以帮助什么