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

Question

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

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

我尝试将 min-height 设置为 100% 并在父项上 overflow hidden 。 right_col 有 overflow-y 滚动。

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

这是我的 code

这是我的 css

Answer 1

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

vh 是视口(viewport)高度的测量单位，可以为您提供后续相对测量的基础。

您的问题是可滚动元素的高度不正确。设置 ma​​x-height 或 height 会有所帮助。

在此示例中，为所有列提供 100% 的最小高度，然后为要滚动的列提供 100% 的最大高度并滚动 overflow-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>

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