Stretch footer to bottom of browser window

[JPD]

I'm not looking for a Sticky Footer solution here. What I want is for the footer, the final containing div, to extend to the bottom of the browser window.

Here's the code. If I have to use Javascript, that's fine. This doesn't have to be a pure CSS solution.

Thanks!

*{margin:0;padding:0;}

html {
} 

body {
background: #000 url(../images/bg_patt.gif) repeat left top;
}

#header {
margin:0px auto;
height:68px;
width:818px;
overflow:hidden;
background-color:pink;
}

#navbar {
margin:0px auto;
height:39px;
width:818px;
overflow:hidden;
background-color:teal;
}

#main_content {
margin:0px auto;
overflow:hidden;
width:818px;
background-color:yellow;
}

#footer {
margin:0px auto;
height:39px;
width:818px;
padding-bottom:60px;
background-color:magenta;
}

 <!--begin header-->
    <div id="header">
    header
    </div>
    <!--end header-->
    
    <!--begin navbar-->
    <div id="navbar">
    navbar
    </div>
    <!--end navbar-->
    
    <!--begin main_content-->
    <div id="main_content">
        maincontent
    </div>
    <!--end main_content-->
    
    <!--begin footer-->
    <div id="footer">
        footer
    </div>
    <!--end footer-->

[Big O(1)]

I'm guessing you're talking about fixed positioning when you say "sticky footer." Try absolute positioning instead:

div#footer
{
   position: absolute;
   bottom: 0;
}

[JPD]

I appreciate the reply, but, to be clear, I am NOT looking for a sticky/fixed footer solution.

I just want the footer to extend 100% to fill the vertical space in the browser window.

Thanks again.

[Big O(1)]

oh, in that case you're going to have to apply a height to the footer using a percentage like 50% or however much you want. Then make the rest of the page have the remaining height.

[JPD]

Thanks again, but I don't believe that works. At least not with the code I provided. Are you able to accomplish that using the code I provided? Can you show me an example?

Thanks.

[Big O(1)]

It worked for me. You just have to set the heights of each container properly. Here's what I used:

*{margin:0;padding:0;}

html {
} 

body {
background: #000 url(../images/bg_patt.gif) repeat left top;
height: 100%;
}

#header {
margin:0px auto;
height:15%;
width:818px;
overflow:hidden;
background-color:pink;
}

#navbar {
margin:0px auto;
height:15%;
width:818px;
overflow:hidden;
background-color:teal;
}

#main_content {
margin:0px auto;
overflow:hidden;
height: 50%;
width:818px;
background-color:yellow;
}

#footer {
margin:0px auto;
height:20%;
width:818px;
padding-bottom:60px;
background-color:magenta;
}

Remove that padding value. Or you could use a percentage value instead and subtract that value from the footer's height. For example padding-bottom: 3% and height: 17%

[JPD]

Thanks again for the response.

I don't think that's going to work for me, since I can't have the main_content div be a fixed height. It needs to expand to contain the content within.

[NoasIT]

Question: Are you looking for the footer to be at the bottom of the window if the content doesn't fill window? Does this mean if the content extends past the bottom of the window you want the footer not to be visible unless you scroll down?

[grisgruis]

To set a custom height locked to somewhere:

CSS---------------

body,html{
    height:100%;}
    #outerbox{
    	width:100%;
    	position:absolute;   /* to place it somewhere on the screen */
    	top:130px;            /* free space at top */
    	bottom:0px;}         /* makes it lock to the bottom */
    #innerbox{
        width:100%;
    	position:absolute;				
    	min-height:100%; !important /* browser fill */
    	height:auto;}        /*content fill */

HTML--------------

    <div id="outerbox">
         <div id="innerbox"></div>
    </div>