Question

After I got some help from a couple fellow members suggesting that the solution to my problem here:
DIV "100%" height, stretch from top DIV to bottom footer to accommodate background
was JavaScript / jQuery, I found something online:

http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/

However, I need some customizing. At the moment it does what I need it to do. When I have a little content, it’ll push my DIV to the entire height of the browser.

But when I have MORE content, the content keeps going, but the DIV doesnt expand.

How can I customize the following script so it detects that if there’s enough content it doesn’t need to adjust the height?

<script>
//Initial load of page
$(document).ready(sizeContent);

//Every resize of window
$(window).resize(sizeContent);

//Dynamically assign height
function sizeContent() {
    var newHeight = $("html").height() - $("#header").height() - $("#content-header").height()- $("#footer-wrapper").height() + 6 + "px";
    $("#content").css("height", newHeight);
}
</script>

Answer 1

function sizeContent() {
    var html = $("html").height(),
        content = $("#content").height(),
        header = $("#header").height(),
        contentHeader = $("#content-header").height(),
        footerWrapper = $("#footer-wrapper").height(),
        availableSpace = html - header - contentHeader - footerWrapper;

    if (content < availableSpace) {
        $("#content").css("height", availableSpace + 6 + "px");
    }
}