making a div extend the rest of the screen

tominated

macrumors 68000
Original poster
Jul 7, 2006
1,724
0
Queensland, Australia
I am making a layout with two bars (header and footer) and the content in the middle. I can't figure out how to get the footer to extend to fill the bottom area of the window if there is not enough content. It will be variable content, which makes it even harder to manage. any ideas? thanks in advance

BTW: it's xhtml and css
 

angelwatt

Moderator emeritus
Aug 16, 2005
7,842
7
USA
CSS-wise, body will need margin: 0; along with any parent of header and footer. Otherwise it can generally only fill as much as its parent. There are some workarounds, but they can be hard to get to work in all browsers.

If you have an example page online somewhere where it can be viewed it could be helpful.

Edit: Nevermind, thanks jng, I misread the question being asked. My solution has no applicability here.
 

rajfantastic

macrumors member
Jun 9, 2007
79
0
something like this might work:

Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
	margin:0;
	padding:0
}

body, html {
	height:100%;
}

#wrapper {
	background-color:red;
	height:100%;
        width:900px;
        margin:0 auto;
}
#header {
	background-color:orange;
}
#content {
	background-color:yellow;
}
-->
</style>
</head>

<body>
<div id="wrapper">
	<div id="header">HEADER</div>
    <div id="content">CONTENT</div>
    <div id="footer">FOOTER</div>
</div>
</body>
</html>
notice that the footer is actually the "wrapper", giving it the illusion of filling the page.
 

jng

macrumors 65816
Apr 6, 2007
1,012
0
Germany
CSS-wise, body will need margin: 0; along with any parent of header and footer. Otherwise it can generally only fill as much as its parent. There are some workarounds, but they can be hard to get to work in all browsers.

If you have an example page online somewhere where it can be viewed it could be helpful.
He wants the bottom to extend to the bottom. That won't do it and height: 100% is sloppy.

Tom, you need to give us an example. It really depends on your design. It's not really a question of making it 100% so much as making it look like it's 100% in height.

You could for example do a faux column background.

But then again you need to tell us what the page looks like.

min-height is another also another option you could use.
 

angelwatt

Moderator emeritus
Aug 16, 2005
7,842
7
USA
Not a flawless solution, but for #footercontent if you add "position:absolute; bottom:0px;" it will do what you want in some browsers. That's why it's not so flawless, but may help lead you to a full solution, depending on all your needs.
 

jng

macrumors 65816
Apr 6, 2007
1,012
0
Germany
Not a flawless solution, but for #footercontent if you add "position:absolute; bottom:0px;" it will do what you want in some browsers. That's why it's not so flawless, but may help lead you to a full solution, depending on all your needs.
If you do that, don't forget then to add the following to your container.
Code:
#container { position: relative; }
If you don't and have content that stretches the page longer than the edge of the screen i.e. it scrolls verticallly, the footer is stuck there and when you scroll down the footer "scrolls up" and away.

You probably have to use min-height for your content div in this case. and the above (with relative in parent) to get what you want.
 

tominated

macrumors 68000
Original poster
Jul 7, 2006
1,724
0
Queensland, Australia
wow... my brain hurts. I don't want the footer to scroll up like jng said would happen. The content strip is not a variable height. it is always the same. I want the footer to start after the cotent strip and if there isn't enough content there, stretch it down to the bottom of the users browser window (can't use min-height, because i don't have a clue what height the users window size is) and if the content (in the footer) is too long to fit in that small space, it lets you scroll the whole page. is that any better
 

jng

macrumors 65816
Apr 6, 2007
1,012
0
Germany
why can't you just make the body background-color the same color as your footer?
Not only is it a gradient (mentioned above) but also there's stuff in it, "content" + "friends."

wow... my brain hurts. I don't want the footer to scroll up like jng said would happen. The content strip is not a variable height. it is always the same. I want the footer to start after the cotent strip and if there isn't enough content there, stretch it down to the bottom of the users browser window (can't use min-height, because i don't have a clue what height the users window size is) and if the content (in the footer) is too long to fit in that small space, it lets you scroll the whole page. is that any better
It won't scroll up if you add position:relative to your container.

You don't need to know the user's resolution for min-height. What height is it supposed to be? Just guess a bit higher, for example:

Code:
#content {
min-height: 500px;
overflow: auto;
}
 

tominated

macrumors 68000
Original poster
Jul 7, 2006
1,724
0
Queensland, Australia
it doesn't actually do anything. I need the users resolution so i can make the footer container's min-height the space left under the content div (which is fixed in height). this sound any different to what I have previously said?
 

rajfantastic

macrumors member
Jun 9, 2007
79
0
Quote:
Originally Posted by rajfantastic View Post
why can't you just make the body background-color the same color as your footer?
Not only is it a gradient (mentioned above) but also there's stuff in it, "content" + "friends."
sooo take the last/darkest color of the gradient and make it the background-color? it shouldnt be any more complicated than that.
 

jng

macrumors 65816
Apr 6, 2007
1,012
0
Germany
If you're making your background color the same as the darkest color of your gradiented footer and your footer ends before the bottom edge of my browser window, then I believe, yes it would look bloated - because of the background, not a min-height issue.

But maybe we're thinking two different concepts.