Html 引导程序 3 列内的固定高度可滚动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34728883/
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
Fixed height scrollable div inside of a bootstrap 3 column
提问by user210757
I have seen similar questions, but nothing exactly like I'm trying. Most of the examples make the entire col-md-2 scroll, I need content within that to scroll.
我见过类似的问题，但没有完全像我正在尝试的那样。大多数示例使整个 col-md-2 滚动，我需要其中的内容来滚动。
Inside a fluid container, I have a left navigation type column, and a right content column.
在流体容器内，我有一个左侧导航类型列和一个右侧内容列。
Inside the left column I want a div at the top class="top", and a div at the bottom class="bottom". And in the middle I have a list. Say bottom and top are 100px. I want the list to take up all of the space between the two, and if the list content is larger than this area, I want it to scroll. If the list content is smaller than the space between the two, I want it to take up all of that space (not collapse).
在左列中，我想要一个 div 位于顶级 class="top"，以及一个位于底部 class="bottom" 的 div。在中间我有一个清单。说底部和顶部是 100px。我希望列表占据两者之间的所有空间，如果列表内容大于这个区域，我希望它滚动。如果列表内容小于两者之间的空间，我希望它占据所有空间（而不是折叠）。
Here is a psuedo example:
这是一个伪示例：
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="top">
. . .
</div>
<div class="scroll-area">
<ul>
<li>one</li>
. . .
<li>one-thousand</li>
</ul>
</div>
<div class="bottom">
. . .
</div>
</div>
<div class="col-md-10 content">
</div>
</div>
</div>
<style>
.top, .bottom { height: 100px; }
</style>
I was able to do this before without bootstrap by giving "scroll-area" absolute positioning. I can make the scroll-area work with fixed positioning, but the containing "col-md-2 is collapsed, so "bottom" sits up top.
通过提供“滚动区域”绝对定位，我可以在没有引导的情况下做到这一点。我可以使滚动区域以固定位置工作，但包含“col-md-2”的内容已折叠，因此“底部”位于顶部。
How can I make this work?
我怎样才能使这项工作？
采纳答案by BinaryGhost
This answer is for when you dont know the window height.
此答案适用于您不知道窗口高度的情况。
You can still achieve this using position:absolute; you just tell the blue and red parts to take top and bottom, the green part should have top 100px, and then you just use css 'calc' to get its height.
您仍然可以使用 position:absolute; 来实现这一点。您只需告诉蓝色和红色部分取顶部和底部，绿色部分应具有顶部 100px，然后您只需使用 css 'calc' 来获取其高度。
Styles
样式
.side{
position:fixed;
top:0;
left:0;
height:100%;
padding:0;
}
.scroll-area{
width:100%;
height:calc(100% - 200px);
margin-top:100px;
background-color:green;
float:left;
overflow-y:scroll;
}
html
html
<div class="row">
<div class="col-md-2 col-xs-2 side">
<div style="position:relative;width:100%;height:100%;">
<div class="top" style="background-color:red;top:0;width:100%;height: 100px; position:absolute;">
top
</div>
<div class="scroll-area">
<ul>
<li>one</li>
</ul>
<div style="width:100%;height:10000px;">
</div>
<ul>
<li>one-thousand</li>
</ul>
</div>
<div class="bottom" style="background-color:blue;bottom:0;width:100%;height: 100px; position:absolute;">
bottom
</div>
</div>
</div>
<div class="col-md-10 col-xs-offset-2 content col-md-offset-2">
<div style="height:1000px;width:100%;">
</div>
</div>
</div>
take a look at this filddle -
看看这个 filddle -
回答by Neerav Patel
Here I added fiddle link for what you had problem, with . Hope this helps`
在这里，我为您遇到的问题添加了小提琴链接，使用 . 希望这有帮助`
<div class="fixed">
<b>Fixed Content</b>
<br/>
<br/>
<p>top</p>
</div>
<div class="scrollit">
<b>Scroll Content</b>
<br/>
<br/>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="fixed">
<b>Fixed Content</b>
<br/>
<br/> bottom
</div>
