CSS高度100％无绝对位置

Question

我在一行中显示3个div框，但我希望它们的高度为100％。当我使用绝对位置和高度100％时。然后Box变为100％，但它们相互堆叠。但我希望他们彼此相邻。

Answer 1

要使div具有100％的高度，您必须将body和html高度设置为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>

希望有所帮助