溢出-y滚动嵌套div？

我有一个2列的容器div。我需要将容器设置为视图的百分比，因此我使用75vh。溢出-y滚动嵌套div？

在左栏内是一个引导面板和很多内容。我想让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>

来源

2016-04-25 Steve

你怎么会有这么多的代表，仍然不知道问题问调试代码需要在问题**中使用[MCVE] **？ – cimmanon

代码笔不够用？我今天过得很艰难，对不起。 – Steve

我觉得这里的问题是，面板没有一个max-height并且可以只保留挺大的，因此它不会滚动。

我通过将max-height: 75vh;添加到.left-pane来得到它的工作。

如果你不想让整个容器滚动，只需将该height设置为max-height即可。

来源

2016-04-25 21:07:26 Coleman

如科尔曼所说，这只是一个增加的最大高度的事：

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

}

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

来源

2016-04-26 00:04:47

溢出-y滚动嵌套div？

回答

相关问题