基于gentelella的可滚动两列布局答案

【问题标题】：Scrollable two column layout based on gentelella基于gentelella的可滚动两列布局
【发布时间】：2016-10-14 16:14:40
【问题描述】：

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

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

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

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

这是我的code

这是我的css

【问题讨论】：

你能分享一下css代码吗？这就是真正的问题所在。
请看附件css

标签： css html twitter-bootstrap scroll gentelella

【解决方案1】：

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

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

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

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

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

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

【讨论】：