CSS 引导列中的滚动固定高度 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23439358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A scrolling fixed height div in bootstrap column
提问by user1517566
Newbie to Css so hoping this is trivial.
Css 新手，所以希望这是微不足道的。
Assume I have a two column, responsive bootstrap 3 grid. In the left column, I want the column to always fill the height of the browser window, but then within that column I then want a scrollable div to serve up content that is a list much longer than the height of the column it is embedded in.
假设我有一个两列的响应式引导程序 3 网格。在左列中，我希望该列始终填充浏览器窗口的高度，但随后在该列中，我想要一个可滚动的 div 来提供比它嵌入的列的高度长得多的列表内容.
Make sense? So far my experiments lead me to the longer div defining the height of its container, which means the entire window scrolls vertically.
有道理？到目前为止，我的实验导致我使用更长的 div 定义其容器的高度，这意味着整个窗口垂直滚动。
回答by ChaveVrey
Give this a try:
试试这个：
<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>
