CSS中的vh和百分比？答案

【问题标题】：vh and percentage in CSS?CSS中的vh和百分比？
【发布时间】：2019-12-16 20:03:49
【问题描述】：

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

我将 body 设置为 100vh 以覆盖屏幕
我有 .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>

【问题讨论】：

你应该为 .navbar 类添加 height:50vh
从 .all 类中移除宽度和高度
% 不接受弹性高度和窗口高度
从 .all 类中删除宽度或在该类中使用 width: 100vw
你想在哪里包含图片？

标签： html css django bootstrap-4

【解决方案1】：

我想，与其使用vh，不如使用% 方法。

试试下面的 CSS：

html,
  body {
    box-sizing: border-box;
    height: 100%;
    background-color: red;
  }
.navbar {
    height: 50%;
    width: 50%;
    background-color: white;
}
.navbarButtons {
    background-color: aqua;
}

【讨论】：

我尝试在正文中使用百分比，但它并没有覆盖整个页面，只是一个很小的部分。

【解决方案2】：

第一边注： 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>

【讨论】：

【解决方案3】：

除了 Kareem 答案，您需要更新一些样式，其他宽 vh 视图高度 50 将适用于所有浏览器。

.all {
  background-color: red;
}

.navbar {
  background-color: white;
  height: 50vh;
}

.navbarButtons button {
  background-color: aqua;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="{% static " NavBarHtml.css " %}" />
  <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">
</head>

<body class="all">
  <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>
</body>

</html>

【讨论】：