Question

<div id="content">
        <div id="header">

        </div>

        <div id="main-content">


        </div>


    </div>


html, body{height:100%;margin: 0px; padding: 0px; background-color: black;}


div#content{width:600px; margin: 0 auto; height:100%;}

div#header{width:600px; height:200px;}

div#main-content{width:600px; height:100%; background-color: white;}

As you can see, adding a header pushes everything down. I want main-content to extend to the end of the browser.

I think i worked around this issue before by creating a header with an image similar to my background in order to fake the appearance, however my background i’ll be using is much too complicated.

Are there any methods to do this? possibly a working javascript fix?

Answer 1

You can make your main-content div positioned absolutely and then specify its top and bottom attributes. I’ve setup a jsfiddle here: http://jsfiddle.net/wrn8Y/1/

div#main-content{
    position: absolute;
    top: 200px;
    width:600px;
    bottom: 0px;
    background-color: white;

}

Note that the top attribute is set to the bottom of your header, and the bottom is set to zero to hit the bottom of the page. If you wanted to have a footer you could change the bottom attribute to accommodate the footer.

Also you can do this with javascript, I generally use JQuery so here is some JQuery code that gets it done:

$('div#main-content').height($(document).height() - $('div#header').height());

This javascript (Jquery) will work with relatively positioned divs and the only css you would need to change is to remove the “height: 100%” on the “div#main-content” style.