twitter-bootstrap Bootstrap 3 well 和 list-item-group overflow-y 滚动，拉伸到剩余高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26206408/
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
Bootstrap 3 well and list-item-group overflow-y scroll with stretching to remaining height
提问by Alexander Zeitler
I've the following HTML based on Bootstrap 3:
我有以下基于 Bootstrap 3 的 HTML：
<div class="row">
<div class="col-md-3">
<div class="well" id="well1">
Some content
</div>
<div class="well" id="well2">
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 1</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 2</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 3</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 4</h4>
<p class="list-group-item-text">Some text...</p>
</a>
</div>
</div>
</div>
</div>
The number of list-group-item-instances may vary.
list-group-item-instances的数量可能会有所不同。
What I want to achieve is the following:
我想要实现的是以下内容：
I want well2to be stretched to the maximum remaining height and to show a vertical scrollbar inside well2if there a more list-group-item-instances than would fit into the browser window without scrolling the complete browser window.
我想well2被拉伸到最大剩余高度并在里面显示一个垂直滚动条，well2如果有更多的list-group-item-instances 比不滚动整个浏览器窗口适合浏览器窗口。
采纳答案by jme11
To get your two elements to comprise the entire height of the browser, you'll need to have all of the ancestor elements to have some height set on them. Set the html and body to 100% height, then create a class to add to your other ancestor elements. I called this class full-height.
为了让你的两个元素构成浏览器的整个高度，你需要让所有的祖先元素都设置一些高度。将 html 和 body 设置为 100% 高度，然后创建一个类以添加到其他祖先元素。我称这个班级为全高。
Now that all of the ancestors have a height, you can simply set the height for each of your two wells. Because the well in Twitter Bootstrap has 20px of margin, you can use the calc() expression on the first well to subtract the margin from the percentage. All modern browsers support calc(). As a back up for IE8 and older versions of the Android browser, you can use height with just a percent value first as a fallback.
现在所有祖先都有一个高度，您可以简单地为两个井中的每一个设置高度。因为 Twitter Bootstrap 中的井有 20px 的边距，您可以在第一个井上使用 calc() 表达式从百分比中减去边距。所有现代浏览器都支持 calc()。作为 IE8 和旧版本 Android 浏览器的备份，您可以先使用带有百分比值的高度作为后备。
For the second well, set it's height to the remaining percent of 100% and set the overflow property on it to auto. I also removed the margin from the bottom of the second well so that it fit tightly to the bottom of the viewport, but of course you can use calc here too.
对于第二口井，将其高度设置为 100% 的剩余百分比，并将其上的溢出属性设置为自动。我还移除了第二个孔底部的边距，使其与视口底部紧密贴合，但当然您也可以在这里使用 calc。
HTML:
HTML：
<div class="container full-height">
<div class="row full-height">
<div class="col-md-3 full-height">
<div class="well" id="well1">Some content</div>
<div class="well" id="well2">
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 1</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 2</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 3</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 4</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 5</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 6</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 7</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 8</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 9</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 10</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 11</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 12</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 13</h4>
<p class="list-group-item-text">Some text...</p>
</a>
</div>
</div>
</div>
</div>
</div>
CSS:
CSS：
html, body, .full-height {
height: 100%;
}
#well1 {
height: 15%; /*fall back for IE8, Safari 5.1, Opera Mini and pre-4.4 Android browsers*/
height: calc(15% - 20px);
overflow: hidden; /*better to decide how you want to handle this than to let the browser decide*/
}
#well2 {
height: 85%;
margin-bottom: 0;
overflow: auto;
}
