html - CSS 中的 vh 和百分比？

Question

我正在尝试让 .navbar 占据屏幕的一半，但它没有正确显示。我不确定为什么？我猜还有另一个容器，但我不确定为什么？

1. 我将 body 设置为 100vh 以覆盖屏幕

2. 我有 .navbar 一半使用百分比

html文件:

    body {
      background-color: red !important;
      width: 100vh;
      height: 100vh;
    }
    .navbar{
      width: 50%;
      background-color: white;
    }
    .navbarButtons{
      background-color: aqua;
    }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <div class="navbar">
            <div class="navbarButtons">
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
            </div>
        </div>

Answer 1

第一边注:vh 和 vw 之间存在差异。你应该添加:

width: 100vw //vw is view width
height: 100vh // vh is view height

要使页眉高度为屏幕的一半，只需添加:

height: 50vh

工作片段:

body {
      background-color: red !important;
      width: 100vw;
      height: 100vh;
    }
    .navbar{
      width: 100%; 
      height: 50vh;
      background-color: white;
    }
    .navbarButtons{
      background-color: aqua;
    }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <div class="navbar">
            <div class="navbarButtons">
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
            </div>
        </div>