Telling a div to take up "as much height is left"

Question

I have a grid of nine "widgets". Each widget has a .widget-header, .widget-body, and .widget-footer.

The heights of the .widget-header and .widget-footer will vary, and I'd like the .widget-body. to just take up whatever space is left. The content inside the .widget-body will scale.

Here's my fiddle: (you'll need to stretch the width of the "result" area so you can see the 3x3 grid).

One of my widgets:

<div class="widget widget-chart">
    <div class="widget-header">
        <h5>Socioeconomic: Middle Class and Performance: High</h5>
    </div>
    <div class="widget-body">
        <img src="http://www.mathgoodies.com/lessons/graphs/images/line_example1.jpg" />
    </div>
    <div class="widget-footer">
        <p>This is some footer content.</p>
    </div>
</div>

And the related CSS:

.widget{
    height: 100%;
    width: 100%;
}
.widget .widget-body{
    width: 100%;
    height: auto;
}

I'm pretty sure height: auto; isn't doing anything because it probably already is auto. Any ideas?

possible duplicate of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — Peter, Feb 12 '14 at 14:07

score 0 · Answer 1 · answered Feb 12 '14 at 14:17

0

all you need to do is position the footer absolutely to the bottom of the widget-container.

It will work best if you atleast give the widgets a static height. and the footer will always stick to the bottom..

.widget{
    height: 200px;
    width: 100%;
    position:relative;
}
.widget .widget-body{
    width: 100%;
    height: auto;
}
.widget .widget-foot {
    position:absolute;
    width:100%;
    bottom:0;
}

answered Feb 12 '14 at 14:17

httpgio

127
6

or you can remove the height completely and the footer will still stick to the bottom, the problem is it wont look like a grid if widgets are different heights – httpgio Feb 12 '14 at 14:18

score 0 · Accepted Answer · answered Feb 12 '14 at 14:26

I followed Peter's comment and ended up using jQuery since other aspects of the widget will need it anyway. The widgets can't have set height as it is based on the height and width of the window.

var resizeWidgets = function(){
    $('.widget').each(function(){
        var $widget = $(this);
        $wheader = $widget.find('.widget-header');
        $wbody = $widget.find('.widget-body');
        $wfooter = $widget.find('.widget-footer');

        $wbody.height($widget.height() - $wheader.outerHeight(true) - $wfooter.outerHeight(true))
    });
}

$(function(){
    $(window).on('resize', resizeWidgets);
    resizeWidgets();
});

score 0 · Answer 3 · answered Feb 12 '14 at 15:03

I would use display: table, table-row and table-cell for this.

JSFiddle: http://jsfiddle.net/maximgladkov/ngyJt/

HTML

<div class="widget widget-chart">
    <div class="widget-header">
        <div class="widget-content">
            <h5>Socioeconomic: Middle Class and Performance: High</h5>
        </div>
    </div>
    <div class="widget-body">
        <div class="widget-content">
            <img src="http://www.mathgoodies.com/lessons/graphs/images/line_example1.jpg" />
        </div>
    </div>
    <div class="widget-footer">
        <div class="widget-content">
            <p>This is some footer content.</p>
        </div>
    </div>
</div>

CSS

.widget {
    display: table;
    width: 100%;
    height: 100%;
}

.widget-header, .widget-body, .widget-footer {
    display: table-row;
}

.widget-content {
    display: table-cell;
    border: 1px solid red;
}

.widget-header, .widget-footer {
    height: 40px;
}

Telling a div to take up "as much height is left"

3 Answers3