CSS - Auto Fill Height

Here's a js fiddle of what I currently have, I am trying to get the class panel-body to stretch to the entire window height of the page. It's using bootstrap. http://jsfiddle.net/Y

Solution 1:

You need to set html, body and all panel container to 100% height with inline-block style. More info jsfiddle.net/Y55af/5/.

Solution 2:

If JavaScript is an option, you can do:

(function (D, undefined) {
    'use strict';
    var element, panelBodies;
    panelBodies = Array.prototype.slice.call(D.getElementsByClassName('panel-body'), 0);
    for(;0 < panelBodies.length; element = panelBodies.pop(), element.style.height = D.body.clientHeight + 'px');
}(document));

Solution 3:

I think this is what you're after? body and html need to be set to 100% Also I assumed you meant you wanted the panels to be 50% so you can have two rows otherwise they would overflow. http://jsfiddle.net/Y55af/4/

.mainContent{
    padding:20px;
}
.workplace_outter{
    width:100%;
    oveflow-x:scroll;
}
.workplace_inner{
    width:2000px;
}
.workplace_outter .panel{
    width:300px;
    margin-right:5px;
    display: inline-block;
}

.workplace_outter, .workplace_inner, .panel-body, .mainContent {
    height:100%;
}

.panel {
    height: 50%;
}

html, body {
    height: 100%;
}