css - Bootstrap 列中的滚动固定高度 div

Question

CSS 新手，希望这很简单。

假设我有一个两列、响应式 Bootstrap 3 网格。在左列中，我希望该列始终填充浏览器窗口的高度，但在该列中，我希望有一个可滚动的 div 来提供比嵌入的列的高度长得多的列表内容.

有道理吗？到目前为止，我的实验引导我使用更长的 div 来定义其容器的高度，这意味着整个窗口垂直滚动。

Answer 1

尝试一下:

<div class="row">
  <div class="col-lg-6">
    <div class="col-lg-6" style="
      height: 100%;
      overflow: scroll;
    ">
      <img src="http://placehold.it/650x250" alt="..." class="img-rounded img-responsive">
      <img src="http://placehold.it/650x250" alt="..." class="img-rounded img-responsive">
      <img src="http://placehold.it/650x250" alt="..." class="img-rounded img-responsive">
      <img src="http://placehold.it/650x250" alt="..." class="img-rounded img-responsive">
      <img src="http://placehold.it/650x250" alt="..." class="img-rounded img-responsive">
      <img src="http://placehold.it/650x250" alt="..." class="img-rounded img-responsive">
      <img src="http://placehold.it/650x250" alt="..." class="img-rounded img-responsive">
      <img src="http://placehold.it/650x250" alt="..." class="img-rounded img-responsive">
      <img src="http://placehold.it/650x250" alt="..." class="img-rounded img-responsive">
      <img src="http://placehold.it/650x250" alt="..." class="img-rounded img-responsive">
      <img src="http://placehold.it/650x250" alt="..." class="img-rounded img-responsive">
      <img src="http://placehold.it/650x250" alt="..." class="img-rounded img-responsive">
      <img src="http://placehold.it/650x250" alt="..." class="img-rounded img-responsive">
      <img src="http://placehold.it/650x250" alt="..." class="img-rounded img-responsive">
    </div>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <img src="http://placehold.it/650x250" alt="..." class="img-rounded img-responsive">
  </div>
</div>