CSS - Auto fill height

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>

You want each ```.panel-body``` to be the height of the entire document? or the height of the screen? — jameslafferty, Nov 18 '13 at 02:37
@jameslafferty height of the window, will update question to clarify — Brian Putt, Nov 18 '13 at 02:39

score 4 · Accepted Answer · answered Nov 18 '13 at 02:59

4

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

answered Nov 18 '13 at 02:59

Alex

11,115
12
51
64

that link is 500ing for me. – jameslafferty Nov 18 '13 at 04:13
try again, it's fiddle inner problems – Alex Nov 18 '13 at 04:30
Link is good and perfect solution. – Undefined-Variables Jul 04 '20 at 03:48

score 0 · Answer 2 · answered Nov 18 '13 at 02:49

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

score 0 · Answer 3 · answered Nov 18 '13 at 02:53

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

I think the OP is looking to make ```.panel-body``` the height of the window (not sure why, but assuming they have their reasons). — jameslafferty, Nov 18 '13 at 04:11

CSS - Auto fill height

3 Answers3

Linked