css - 父级 100% 视口(viewport)高度，一个子级固定高度，另一个占用剩余高度

Question

我正在尝试设计一个 100% 视口(viewport)高度的页面，顶部有一个固定高度的导航，其下方的主体应该占据剩余的高度。

html

<div class="chat">
  <nav>
    <a>Chat</a>
    <ul>
      <li>
        <a>Log In</a>
      </li>
      <li>
        <a>Sign Up</a>
      </li>
    </ul>
  </nav>

  <div class="row">
    <div class="col-4">
      Users
    </div>
    <div class="col-8">
      <div>
        Messages
      </div>
      <div>
        Input
      </div>
    </div>
  </div>
</div>

CSS

.chat {
  height: 100vh;
}
.row {
  background-color: #eceeef;
  height: 100%;
}

聊天占用 100% 视口(viewport)高度，子导航占用固定高度，子行占用其父行的 100%，因此结果是具有 100% 视口(viewport)高度的行。页面最终是视口(viewport)高度加上导航高度，激活滚动。我需要该行取视口(viewport)高度减去导航高度，即导航后聊天中的剩余高度。

Answer 1

假设导航高度为50px，我们可以使用css函数calc计算剩余空间的高度:

.chat {
  height: 100vh;
}
nav {
  height: 50px;
}
.row {
  background-color: #eceeef;
  height: calc(100vh - 50px);
}

假设 nav 是绝对定位的(在这种情况下它将重叠行)并且行顶部边缘将位于 nav 后面，我们需要使用 padding-top: 50px; 向下移动行内容p>

.chat {
  height: 100vh;
}
nav {
  height: 50px;
  position: absolute;
  top: 0;
}
.row {
  background-color: #eceeef;
  height: 100vh;
  padding-top: 50px;
}