Question

我有一个包含2列的容器div。我需要将容器设置为视图的百分比，因此我使用了75vh。

左栏内部是一个自举面板和很多内容。我希望那个div在它不适合时滚动，它拒绝。我意识到我必须遗漏一些简单的东西。

CSS：

  .container {
    border: 1px solid #000;
    width: 80vw;
    height: 75vh;
    .left-pane {
      overflow-y: scroll;
      border: 1px solid #0f0;
      height: 100%;
    }
    .right-pane {
      background-color: #ccc;
    }

  }

HTML：

<div class="container">
  <div class="row">
    <div class="col-md-7 left-pane">
      <div class="panel panel-default">
          Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

      </div>

    </div>
    <div class="col-md-5 right-pane"></div>
  </div>
</div>

Answer 1

我认为这里的问题是面板没有max-height并且可以继续变大，因此它不会滚动。

我通过将max-height: 75vh;添加到.left-pane来实现它。

如果您不希望整个容器滚动，只需将height设为max-height。

Answer 2

正如科尔曼所说，这只是增加最大高度的问题：

.left-pane {
  overflow-y: scroll;
  border: 1px solid #0f0;
  max-height: 75vh;

}

这里是链接： http://codepen.io/Keinchy/pen/ONomZz

溢出-y在嵌套div中滚动？

2 个答案: