Question

我正在尝试设置100％视口高度页面的样式，顶部有一个固定高度导航，下面有一个应该占据剩余高度的主体。

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％的视口高度，子导航占用了一些固定的高度，子行占用了100％的父级，因此结果是100％视口高度的行。页面最终为视口高度加上导航高度，激活滚动。我需要该行来获取视口高度减去导航高度，即导航后聊天中的剩余高度。

Answer 1

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

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

假设nav绝对定位（在这种情况下它将是重叠行）并且行顶边将站在导航后面，我们需要使用padding-top: 50px;向下移动行内容

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

父级100％视口高度，一个孩子固定高度，另一个剩余

1 个答案: