Question

我在一个容器中有3个盒子，我试图为每个盒子设置相同的高度，但是height 100vh或height : 100%不能正常工作。你知道为什么吗？我在其他浏览器和操作系统上尝试过，但结果仍然相同。绿色框未达到所需的高度。

/* ALL SETTINGS */

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: var(--size-box);
  -moz-box-sizing: var(--size-box);
  box-sizing: var(--size-box);
}

html,
body {
  margin: 0;
  height: 100%;
}




.wrapper {

  max-width: 100%;
  height: 100vh;
}

.wrapper .box {
  width: 100%;
  height: 100vh;
}

.box:nth-child(1){
  background-color: blue
}

.box:nth-child(2){
  background-color: green
}

.box:nth-child(3){
  background-color: red
}

<html>
  <body>

    <div class="wrapper">
         <div class="box">
          </div>
         <div class="box">
          </div>
         <div class="box">
         </div>
    </div>
  </body>
</html>

Answer 1

这个呢？向框添加33％的宽度并使其内联块可将它们水平对齐。我删除了规则*，因为它过于激进。在没有明确意图的情况下使用过于激进的规则似乎是不好的做法。

html,
body {
  margin: 0;
  height: 100%;
}

.wrapper {
  max-width: 100%;
  height: 100vh;
  padding: 0;
}

.wrapper .box {
  width: 33%;
  height: 100vh;
  display: inline-block;
  margin: 0;
}

.box:nth-child(1){
  background-color: blue
}

.box:nth-child(2){
  background-color: green
}

.box:nth-child(3){
  background-color: red
}

Box 100vh不会占据整页

1 个答案: