CSS - Auto fill height [duplicate]

Question

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/Y55af/

Sample css:

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

Sample HTML:

<div class="mainContent">
    <div class="workplace_outter">
        <div class="workplace_inner">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Item
                </div>
                <div class="panel-body">
                    Item Body....
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

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