100％页面高度w /可滚动列

Question

我正在构建一个具有三列布局的SPA，如下所示。标题是固定的。将柱子包裹在高度为100％的容器中。如果内容超出折叠范围，则每个列都需要变为可滚动。

我的基本HTML

<div class="fixed-header"></div>
    <div class=" page-container">
    <div class="left-panel"></div>
    <div class="content-area"></div>
    <div class="right-panel"></div>
</div>

容器CSS

.page-container {
    position: relative;
    top: 4.25rem;
    height: 100%;
    display: flex;
}

我遇到的问题是，如果任何面板设置为溢出：自动，它将滚动，但仅当内容离开页面时。我不明白为什么会这样，我没有运气纠正它。有什么想法吗？

Answer 1

为了使容器占据页面的100%，您需要使用 viewport-relative unit vh 。您需要将其与 calc() 结合使用，以便补偿 top 偏移量。

至于允许子元素在内容太多时垂直滚动，您只需将 overflow-y: scroll 应用于它们。

在以下示例中可以看到这一点（点击Run code snippet然后Full page以查看更大尺寸生效的高度）：

body {
  margin: 0;
}

.page-container {
  position: relative;
  top: 4.25rem;
  height: calc(100vh - 4.25rem);
  display: flex;
}

.page-container>div {
  overflow-y: scroll;
}

.left-panel {
  width: 30%;
  background: red;
}

.content-area {
  width: 40%;
  background: blue;
}

.right-panel {
  width: 30%;
  background: green;
}

<div class="fixed-header"></div>
<div class="page-container">
  <div class="left-panel">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mauris est, posuere non leo eget, finibus pharetra dui. Duis pellentesque libero sed risus rhoncus, id porttitor mi vehicula. Morbi auctor augue at metus rhoncus, sed semper lacus sollicitudin.
    Etiam sit amet ante lorem. Maecenas et commodo elit. Nullam sit amet vehicula est. Curabitur porttitor erat eros, vitae ornare ipsum eleifend vel. In nec nulla commodo ex pellentesque dictum vel in augue.</div>
  <div class="content-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mauris est, posuere non leo eget, finibus pharetra dui. Duis pellentesque libero sed risus rhoncus, id porttitor mi vehicula. Morbi auctor augue at metus rhoncus, sed semper lacus sollicitudin.
    Etiam sit amet ante lorem. Maecenas et commodo elit. Nullam sit amet vehicula est. Curabitur porttitor erat eros, vitae ornare ipsum eleifend vel. In nec nulla commodo ex pellentesque dictum vel in augue.</div>
  <div class="right-panel">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mauris est, posuere non leo eget, finibus pharetra dui. Duis pellentesque libero sed risus rhoncus, id porttitor mi vehicula. Morbi auctor augue at metus rhoncus, sed semper lacus sollicitudin.
    Etiam sit amet ante lorem. Maecenas et commodo elit. Nullam sit amet vehicula est. Curabitur porttitor erat eros, vitae ornare ipsum eleifend vel. In nec nulla commodo ex pellentesque dictum vel in augue.</div>
</div>

希望这有帮助！