时间戳

首页 > 解决方案 > Box 100vh 不会占用整个页面

html - Box 100vh 不会占用整个页面

问题描述

我在一个容器中有 3 个盒子，我试图让每个盒子的高度相同，但是height 100vhor 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>

标签： htmlcss

解决方案

这个如何？将 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
}

推荐阅读