Question

I’m using backstretch for the background image so that I don’t have problems with the resolutions. The image is a texture (it had one time a white area which should be the background color of the content section – here I didn’t had such problems but others). Now the content section in the middle (including header, footer) should have white background.

Problem

If the content is not high enough I see at the bottom the texture but it should be white. Here is a screenshot of the bottom of the page:

The white section should be extended vertically. So either the content section has to increase in height (according to window height) or I need a sticky footer solution. I tried a few things but none of them worked for me (e.g. tips from How do I force a DIV block to extend to the bottom of a page even if it has no content? or sticky footer solution from Ryan Fait).

This is a stripped down version of my page. Here is the JSFiddle without the jQuery part.

HTML

<div id="header">
    <p>Introduction</p>
</div>
<div id="main-wrap">
    <div id="column1">
        <p>Menu</p>
    </div>
    <div id="column2">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="clearer"></div>
</div>
<div id="footer">
    <p>Some Links</p>
</div>

CSS

body {
    background-color: black;
}

#header {
    background-color: white;
    width: 380px;
    margin: 0 auto;
}


#main-wrap {
    background-color: white;
    width: 380px;
    margin: 0 auto;
}


#column1{
    float: left;
    width: 60px;
}


#column2{
    float: left;
    padding-left: 20px;
    width: 300px;
}

#footer {
    background-color: white;
    width: 380px;
    margin: 0 auto;
}

.clearer{
    float: none;
    clear: both;
}

The only thing I can imagine which would work is to use Javascript to calculate a spacer div at the bottom of the page … The solution should work for all major browsers (IE7-IE9, FF, Chrome, Opera, Safari).

Current JS-Solution

<script language="javascript" type="text/javascript">
    <!--
    $(document).ready(function(){
        $.backstretch("img/background.jpg");

        var headerheight = $('#header').height();
        var column1height = $('#column1').height();
        var column2height = $('#column2').height();
        var columnheight = Math.max(column1height, column2height);
        var footerheight = $('#footer').height();
        var contentheight = headerheight + columnheight + footerheight;
        var innerheight = $(window).height();
        // calculate height of content to fill out full height of window
        var height = innerheight - headerheight - footerheight;
        // only if the the content has not enough height
        if (contentheight < innerheight) {
            $('#main-wrap').css('min-height', Math.max(height, columnheight));
        }
    });
    -->
</script>

A CSS Solution would be nicer but I didn’t found any solution.

Answer 1

You could let the min-height let get calculated by jQuery:

$(function() {
  $("the_content").css("min-height", Math.max(window.innerHeight, parseInt($("the_content").css("height"))));
})

Of course you can justify the window.innerHeight, e.g. if your container has padding (which gets added to the width)