Expanding DIV solution with jQuery, CSS, or Both?

Question

I have an HTML page layout - something like this:

<div id='header'>
Header content
</div>

<div id='main_content'>
some content
</div>

The content in the #main_content div may be really long, or, next to nothing (i use it as part of a template across an entire site).

What I want is for it to minimally be the height of the viewport (minus the height of the header div above that - but no need to get that value, lets just use 100px for sake of discussion).

I can't seem to do this via pure CSS. However, I was thinking perhaps I can fire off a Javascript function every 1 second (and presumably fire it off on the resize event as well), check the height of #main_content, and if its not at least (viewport_hight - 100), then set it to be (viewport_height -100).

Problem is, I am not sure if this is do-able, and, not sure if there is a 'better way'.

Has anyone faced this issue and have a great solution?

Thanks.

Answer 1

Unfortunately, this is not possible with pure CSS. You will need to use JavaScript.

I'm unsure why you would need to call a JavaScript function every second. If it's called when a resize event is triggered and when the page loads, this should be sufficient.

Answer 2

Can you use the CSS min-height property? You can still calculate the value with javascript if necessary.

Answer 3

Take a look at this, I think it will help you: http://www.xs4all.nl/~peterned/examples/csslayout1.html

Answer 4

this can be solved with CSS AND height=100% .. the following code demonstrates. the header here is 25px tall (works on all current browsers):

<div id='viewport' style='height:50%; padding-top: 25px; border: 4px solid green'>
    <div id='header' style='margin-top: -25px'>
     Header content
    </div>
    <div id="main_content" style='height: 100%; border: 1px solid red'>
     some content
    </div>
</div>

Answer 5

Thanks for the feedback. Here is what I wound up doing that worked:

Firs I used pure CSS for Firefox. For IE, used this jquery script (slightly modified for generic use)

$(document).ready(
    function () {
        // (I have some other not relevant code here as well in here)
        if ( $j.browser.msie ){ setContentHeight(); }
    }
);

function setContentHeight() {
    // get viewport height
    var viewportHeight = $(window).height();

    // if body div is not tall enough, make it minimum height
    if ( ( $('#body_content_div').height() - 275 ) < viewportHeight ) {
        var desiredHeight = viewportHeight - 275;
        $('#body_content_div').css("height", desiredHeight + "px");
    }

    // set this function to fire off 1x per second
    // because ajax calls may re-populate the div at any time
    setTimeout("setContentHeight()", 1000);
}

1. on document load it sets desired height
2. function gets called 1x per second to account for resizing and ajax (could have called on resize() event, but that would not account for ajax.