How to make a column use 100% of its parent's height when using bootstrap's grid?

Question

I want to create a layout in bootstrap with a sidebar and main content. I am using the following html at the moment (also in this jsFiddle):

<!DOCTYPE html>
<html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
<style type="text/css">
    #sidebar {
        background-color: lightgreen;
    }
    #footer {
        background-color: lightblue;
    }
</style>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="span4">
            <div id="sidebar">
                <ul>
                    <li><a href="http://www....">Home</a></li>
                    <li><a href="http://www..../faq">Questions</a></li>
                    <li><a href="http://www..../news">News</a></li>
                    <li><a href="http://www..../contact">Contact</a></li>
                </ul>
            </div>

        </div>
        <div class="span8" id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aenean in purus purus.
                Ut risus lorem, pharetra nec iaculis sit amet, blandit nec turpis.
                Aliquam dapibus orci ac sem viverra semper cursus ante varius.
                Vestibulum iaculis eleifend magna, sit amet blandit nibh dignissim pellentesque.
                Etiam suscipit accumsan tincidunt.
                Sed auctor, orci at pretium commodo, enim dui fermentum nulla, id blandit enim lacus non mi.
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aenean in purus purus.
                Ut risus lorem, pharetra nec iaculis sit amet, blandit nec turpis.
                Aliquam dapibus orci ac sem viverra semper cursus ante varius.
                Vestibulum iaculis eleifend magna, sit amet blandit nibh dignissim pellentesque.
                Etiam suscipit accumsan tincidunt.
                Sed auctor, orci at pretium commodo, enim dui fermentum nulla, id blandit enim lacus non mi.
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            </p>

        </div>
    </div>
    <div class="row">
        <div class="span12" id="footer">
            Footer
        </div>
    </div>
</div>
</body>
</html>

What I want is this:

Desired Result

What I get however is this:

Actual result

What can I do to get the sidebar div to go all the way down? Ideally without making changes to the html (only css changes), however if that isn't possible I'll take anything.

This answer might help: http://stackoverflow.com/a/8741070/681807 — My Head Hurts, Dec 17 '12 at 07:53
@MyHeadHurts: Unfortunately that technique doesn't appear to work in the presence of a footer - the sidebar extends to the end of the screen rather than to the footer with that code. — David Miani, Dec 17 '12 at 08:20

My Head Hurts · Accepted Answer · 2016-03-09T11:15:41.830

0

You can achieve this by using a "filler" element.

Create two CSS classes, one called .filler (the parent) and another class with a pseudo-element called .fill::before:

.filler{
    position: relative;   
}

.fill::before{
    content: "";
    position: absolute;
    top:0;
    left: 0;
    width: inherit;
    margin: inherit;
    bottom: 0;
    background-color: lightgreen;
    z-index: -1;
}

You can then add the filler class to the row element and the fill class to the span4 element:

<div class="container">
    <div class="row filler">
        <div class="span4 fill">
            <div id="sidebar">
                <ul>
                    <li><a href="http://www....">Home</a></li>
                    <li><a href="http://www..../faq">Questions</a></li>
                    <li><a href="http://www..../news">News</a></li>
                    <li><a href="http://www..../contact">Contact</a></li>
                </ul>
            </div>
        </div>
    ....
</div>

edited Mar 09 '16 at 11:15

answered Dec 17 '12 at 10:35

My Head Hurts

37,315
16
75
117

1

Thanks that works well. I tried something similar from a related question, but must have messed it up somehow. – David Miani Dec 17 '12 at 11:34
but the :before pseudo won't play in IE7 :( – George Katsanos Apr 06 '13 at 13:51
@GeorgeKatsanos I don't think that is an issue. IE7 has less than 1% of the market share in every region of the world. Obviously it is up to you which browsers you support, but you have to draw the line at some point. Do you still build IE6 ready websites? – My Head Hurts Apr 06 '13 at 15:46
The output from the "working example" bears almost no resemblance to the layout that the OP asked for, in my browser (Chrome 49.0.2623.75) – GreenAsJade Mar 09 '16 at 05:27
@GreenAsJade - thanks for the feedback. The example was created 3 years ago and linked to a Twitter bootstrap hot link that no longer exists - for this reason I have removed the working example. However the proposed additional CSS is still applicable and should still will work as expected if you try it – My Head Hurts Mar 09 '16 at 11:14

How to make a column use 100% of its parent's height when using bootstrap's grid?

1 Answers1