100% height for bootstrap columns in container

Question

I have a bootstrap row with 3 columns nested within a container which I'd like to give a height of 100% for each row, applying vertical scrolling if they overflow.

Current Layout

Current layout

DOM

<body>
    <div id="wrapper">
        <nav...

        </nav>

        <div id="page-wrapper" class="container-fluid">
            <div class="content" ui-view>
                <!-- content starts here (loaded by angular)-->
                <div class="row">
                    <div class="col-md-4 nopadding">
                        ...
                    </div>
                    <div class="col-md-4">
                        <!-- example column content -->
                        <div class="list-group">
                            <a class="list-group-item" ng-repeat="..."></a>
                        </div>
                    </div>
                    <div class="col-md-4 nopadding">
                        ...
                    </div>
                </div>
                <!-- content ends here -->
            </div>
        </div>
        ...

I tried a lot of things now, e.g. negative margins, absolute positioning, displaying the columns as table/table-cells. However everytime the content populates, the list groups expand to the height they need for displaying all items, pushing the whole site down.

Based on other examples, it should work this way (it does not, though -> has no effect):

body, html {
    height: 100%;
}

.table-row { // applied to "row"
    display: table;

    > [class*="col-"] { // applied to columns
        vertical-align: top;
        float: none;
        display: table-cell;
    }
}

.overflow-auto { // applied to the list groups inside the columns
    height: 100% !important;
    display: block;
    overflow-y: scroll;
}

Anyone got an idea about how to solve this?

Examples tried:

@AdamJosephLooze For what? The list groups? The row? Each column? — xvdiff, Jan 21 '15 at 16:10
I didnt read your question throughly sorry. Check my jsfiddle. http://jsfiddle.net/366eynsL/1/ I would wrap the content you want verticle scroll for with a div and add `overflow-y: scroll;` and a `height:` css style. — Adam Joseph Looze, Jan 21 '15 at 16:19
@AdamJosephLooze Yes, that's more or less what I'm doing, however upon content population, the div gets pushed down over it's allowed height. — xvdiff, Jan 21 '15 at 16:24

100% height for bootstrap columns in container

Current Layout

DOM

Examples tried:

0 Answers0

Linked