css - 基于gentelella的可滚动两列布局

Question

我正在创建一个基于https://github.com/puikinsh/gentelella的布局 我正在尝试制作三列模板，第二列是可滚动的。

这是布局的模型。 基本上，我需要在里面创建两个面板

我尝试将最小高度设置为 100% 并在父项上隐藏溢出。right_col 有溢出-y 滚动。

这是问题所在。第二列看起来有滚动，但仍然占据了显示内容所需的全部长度。

这是我的代码

这是我的CSS

Answer 1

如果你给容器元素的高度为 100vh，那么你可以给它的子元素 100% 的高度。

vh 是视口高度的测量单位，它可以为您提供一些基础后续相对测量的信息。

您的问题是可滚动元素的高度不正确。设置最大高度或高度将有助于这种情况。

在此示例中，给所有列​​的最小高度为 100%，然后给要滚动的列的最大高度为 100% 并滚动溢出-y，例如

.column {
  display: inline-block;
  width: 33%;
  min-height: 100%;
  vertical-align: top;
  margin: auto;
  font-size: 3em; /* This is just for the example, so we have enough stuff to scroll */
}
#column2 {
  overflow-y: scroll;
  max-height: 100%;
}

<div class="column" id="column1">
</div>
<div class="column" id="column2">
  content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>
</div>
<div class="column" id="column3">
</div>

关键是定义要滚动其内容的元素的高度。