html - css属性计算不适用于视口高度

Question

我有一个使用 flexbox 构建的侧边栏。

我希望 第 5 个 div根据视口高度填充空间。

我有一个侧边栏和标题height:100vh，因为这个标题我的第6 个 div下降并且不适合视口。解决使用但不起作用的问题。min-height:60px60pxheight:calc(100vh-60px)

我的密码笔

   header {
    min-height: 60px;
  }

  .sidebar1__nav-box {
    display: flex;
    flex-direction: column;
    height: calc(100vh-60px);
  }

  div {
    border: 2px solid blue;
  }

  .box5 {
    flex: 1;
  }

HTML

<header><h1>HEADER</h1></header>
    <aside class="sidebar1">
      <div class="sidebar1__nav-box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
      </div>
    </aside>

标签： htmlcss

Answer 1

在“-”符号前后放置空格。

height: calc(100vh - 60px);