Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

making a div extend the rest of the screen

tominated

tominated

macrumors 68000
Original poster
Jul 7, 2006
1,723
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
 
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.
 
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.
 
angelwatt said:
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.
Click to expand...

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.
 

Attachments

  • expression.jpg
    expression.jpg
    153.5 KB · Views: 275
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.
 
angelwatt said:
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.
Click to expand...

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.
 
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
 
rajfantastic said:
why can't you just make the body background-color the same color as your footer?
Click to expand...

Not only is it a gradient (mentioned above) but also there's stuff in it, "content" + "friends."

tominated said:
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
Click to expand...

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;
}
 
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?
 
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."
Click to expand...

sooo take the last/darkest color of the gradient and make it the background-color? it shouldnt be any more complicated than that.
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back