Bootstrap 3 and overflow of list of elements of list of elements stretching to remaining height
I have the following Bootstrap 3 based 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 constants list-group-item
can vary.
I want to achieve the following:
I want it to well2
stretch to its maximum remaining height and show a vertical scrollbar inside well2
if there were more list-group-item
-installs there than would fit in the browser window without scrolling the full browser window.
source to share
To make your two elements include the entire browser height, you need all ancestor elements to have a specific height. Set html and body to 100% height and then create a class to add to other ancestor elements. I called this class complete.
Now that all ancestors have heights, you can simply set the heights for each of the two wells. Since 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 fallback for IE8 and older versions of the Android browser, you can use a percentage height first as a fallback.
For the second deck, set its height to the remaining percentage of 100% and set it to overflow automatically. I've also removed the margin from the bottom of the second well so that it fits snugly against the bottom of the viewport, but of course you can also use calc here.
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
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;
}
source to share