DIV stretch height to fill remaining of page

HTML & CSS
1

To be honest I’ve looked everywhere for a solution to this but just can’t seem to come across the right thing.

I have a header, body content, and footer div’s.

Header, Bodycontent are both inside a wrapper to keep it centered.

The footer is outside the wrapper because I’m going to have it stretched across the entire width of the page (for background purposes).

Problem is if there is not enough content to fill the page, I want the footer to stretch to fill the remaining space on the bottom of the page.

I have set the body, html to height:100% and if I set the footer div to height:100% it takes the height of the entire browser and makes it THAT high. So essentially, it has been made way bigger than what it is supposed to be.

Example one of what the page should look like.

This is what is actually happening.

Current INDEX DIV Layout

<div id="wrap1">
	<div id="headwrap">
    	<div id="headlogoleft"></div>
        <div id="headlogobottom"></div
    </div>
    <!-- Body Content Div -->
</div>

<div id="footercontain"></div>

Current CSS

/* Main Layout */

html, body	{
	height:100%;
}

body	{
	text-align:center;
	background:#f4f4f4 url(img/bg.png) top center repeat-x;
	margin:0px 0px 0px 0px;
}

#wrap1	{
	text-align:left;
	margin:0 auto;
	width:900px;
	height:600px;
	background:#096;
}

#headwrap	{
	width:900px;
	height:110px;
	position:relative;
	margin-top:0px;
	background-color:#3F3;
}

#headlogoleft	{
	position:relative;
	float:left;
	height:80px;
	width:600px;
	background-color:#69F;
}

#headlogobottom	{
	position:relative;
	clear:both;
	float:left;
	width:600px;
	height:30px;
	background-color:#F00;
}

#footercontain	{
	margin:0 auto;
	width:100%;
	height:100%;
	background-color:#C90;
}

Thank you in advance :slight_smile:

2

Basically what I’m saying is I guess the body,html {height: 100%;} and footer div’s height:100% CREATE way more space than I need.

3

Hi, don’t know if you have managed to find a solution, but I had the same problem & I couldn’t find a solution, so what I did was to re-arrange the div’s to create the same effect. I’m still a rookie, so don’t know if this is the technically correct solution, but it’s working for me so far.

Here’s what I did;

CSS:


body {
    background-image:url(images/bg2.jpg);
    margin: 0;
    width: 100&#37;;
    height:100%;
    }
    
    
    #wrapper {
        background-image: url(images/bg.jpg);
        margin: 0 auto;    
        width: 100%;
        height: 100%;
        }
    
    #top {
        background-image: url(images/header.png);
        background-repeat: repeat-x;
        margin: 0 auto;    
        width: 100%;
        height: 257px;
        }
        
    #header {
        width: 1000px;
        height: 257px;
        margin: 0 auto;
        padding: 0;
        }
        
    #content {
        width: 1000px;
        height: 500px;
        margin: 0 auto;
        
        }
        
    #footer{
        width: 1000px;
        min-height: 80px;
        margin: 0 auto;
        }

HTML:


<body>

<div id="wrapper">

<div id="top">
    <div id="header">
    </div><!---header-->
</div><!---top-->

    <div id="content">
    </div><!---content-->
            
</div><!---wrapper-->

    <div id="footer">
        <p>Copyright (c) 2009</p>
    </div>       

</body>

You can pm me with your email address if you want the source files if you’re still having trouble, my english isn’t too good & I’m too lazy to explain further. :slight_smile:

4

Problem is if there is not enough content to fill the page, I want the footer to stretch to fill the remaining space on the bottom of the page.

What might be easier is making the middle content area stretch to meet the footer so the footer can have the same height regardless of screen height.

We call this a sticky footer (not to be confused with a fixed footer, which uses position: fixed). Paul O’B has a good example of one in the CSS stickies somewhere.

Well until the attachment gets approved, I can’t see how body’s image ever gets seen, because wrapper’s would cover it up (but it would make some sense if either body’s or wrappers bg image was positioned to the bottom to look like a footer image).
You need to watch out for setting someone like #wrapper up to height: 100%. This will cut off content that is taller than 100% of someone’s screen, so use min-height: 100% on wrapper instead. I believe some browsers will insist the html element itself is also set to 100% height, as ameprage has it.

Lastly,
margin: 0 auto;
width: 100%;
Those two make no sense together. Auto margins must be ignored if the width is 100% : ) You could do just “margin: 0” with width: 100%.

I did a site that needed multiple bg images for the footer, and did something kinda similar to your setup, where actually the 100%-high (min-height) container held the image that looks like the footer’s, while the footer then could hold the other bg image.

5

Hi,

The sticky footer faq is here and is explained in detail and needs to be read in full :slight_smile:

The basic example is here.

To achieve 100% wide footers you could do something like this:

http://www.pmob.co.uk/temp/sticky-f.htm

Or like this:

http://www.pmob.co.uk/temp/sticky-footer-2col.htm

As Stomme said above you can’t use 100% height on anything except the html and body elements because you effectively limit the element to the initial 100% and it will never grow.

There is also a faq on 100% height that you should read as it goes hand in hand with these concepts :slight_smile:

6

HI,
Yeah I forgot to clean that up:
margin: 0 auto;
width: 100%;

I originally tried something else with the “top” DIV.

Her is a link to wht I am busy with:
http://www.test2.galoot.co.za/ (temporary)

I only started with this site yesterday & I’m still experimenting.

& Yes you are right, the body’s bg image looks like it is the footer, wrapper’s bg image is in the center of the page & only gets displayed how ever long content is. I just used 500px because I need a fixed width for the content, but I want the footer to fill the rest of the page in different resolutions /browsers.

Like I said it may not be correct but it works for me. I will start testing it in different browsers today or tomorrow.

Thanx for the advice.

I see you are from Holland, I’m from South Africa & most of the Afrikaans people are behind the Boys in Orange! Good LUck with the finals, I hope we win!

7

Thanx for the advice Paul & Stomme poes. Still have alot to learn.

8

…but, we wanted a big fight with the Germans : (

I keep expecting to hear stories about crazed drunken Dutch people running around the poor zuid-afrikaaners lawlz.

Like I said it may not be correct but it works for me. I will start testing it in different browsers today or tomorrow.

Ja once you have something inside it’s easier to see how it goes cross-browser and often demos have some “bad” code in them because they are empty.

*edit for your page you might want this in your css:

img {
vertical-align: bottom;
border: 0;
}

removes pesky borders and annoying gaps-under-images.

9

Hi,

That’s a good try :slight_smile: but i’m afraid as I already mentioned that approach will not work and if you add content to your content div you will see that it will just spill out (test in any browser except ie6).


    <div id="content"><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p> </div>

You have set the content to a fixed 500px height which is not a good idea as when you add content it just spills out. If you remove the height you will see that the footer is no longer at the bottom of the page. This is because you omitted the html{height:100%} which is needed for #wrapper to get its 100% height.

Even if you do add the 100% height to html then you will get the same problem as shown in your content div in that content will spill out when it exceeds the initial 100%. You cannot use 100% height in that manner and is explained in the FAQ as mentioned above. Instead you would need to use min-height:100% instead on the wrapper (with ie6 only getting height:100% because it treats height as a minimum anyway).

Of course then you need to bring the footer into view and soak up the overlap. It’s probably better to read the faq on the sticky footer as the method I have set out there is the only one guaranteed to work in all modern browsers including ie6 - 8 and opera. All other sticky footer versions (in the world) fail at some point.

A sticky footer is quite a sticky problem and uses some advanced concepts and all need to work together for it to work :slight_smile:

My original version back in 2003 was the first version to work properly and has been in use for years but the new version has been updated with the fixes for ie8 and opera.

Hope that helps :wink:

10

Hi Paul, Yeah I see what you mean, I will definately be doing some reading. :slight_smile:

@Stomme
I met some Dutch peeps December in Cape Town & I must say, we got into alot of trouble together… was AWESOME! hehe

Of to learning some new stuff now.

Thanx Peeps.

BTW,

Cool forum, it’s the first time I join one & I cansee the benefits already.

Ciao