CSS calc 适用于 vh 但不适用于 %

Question

我有以下内容:

body {
  overflow-x: hidden;
  overflow: hidden;
  height: 100%;
  min-height: 100%;
}

html {
  height: 100%;
  min-height: 100%;
}

.navbar-header {
  background: green;
}

.sidebar {
  background-color: #333;
  border-right: 1px solid #000;
  color: #fff;
  position: fixed;
  width: 178px;
  height: 100%;
}

.content {
  border: 1px solid #ddd;
  height: calc(100% - 150px);
  background-color: #ffffff;
  overflow: scroll;
  overflow-x: hidden;
  margin-left: 178px;
}

.footer {
  border: 1px solid #ddd;
  min-height: 78px;
  margin-top: 10px;
  padding: 20px;
  background-color: #f6f9fb;
  position: fixed;
  bottom: 0;
  width: calc(100% - 178px);
  left: 185px;
}

<div class="navbar-header">
  header
</div>
<nav class="sidebar">
  sidebar
</nav>

<div class="content">
  content
</div>


<div class="footer">

  footer
</div>

但在我的元素中，为了使 calc 正常工作，我更改了 % 每个 vh 以使其正常工作，很抱歉我不能提供我的本地代码，但我想了解为什么我的代码只能使用 vh 而不是 %。

height: calc(100vh - 150px);
height: -moz-calc(100vh - 150px);
height: -webkit-calc(100vh - 150px);

Answer 1

高度的百分比值(也在 calc 中)仅在父元素具有固定高度，或者所有父元素、祖 parent 等直到主体(或祖先)时才有效具有固定 px 宽度)具有百分比高度(即没有 auto 高度)。