CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Alexander Zeitler
Alexander Zeitler

Reputation: 13089

Bootstrap 3 well and list-item-group overflow-y scroll with stretching to remaining height

I've the following HTML based on Bootstrap 3:

<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.

What I want to achieve is the following:

I want well2 to be stretched to the maximum remaining height and to show a vertical scrollbar inside well2 if there a more list-group-item-instances than would fit into the browser window without scrolling the complete browser window.

Upvotes: 4

Views: 22219

Answers (1)

jme11
jme11

Reputation: 17372

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.

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.

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.

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;
}

Upvotes: 3

Related Questions