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>

引导列中的滚动固定高度div

1 个答案: