引导列中的滚动固定高度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>