html - 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>

希望这对您有所帮助!