PDA

View Full Version : CSS Learning CSS, help with one thing


philljc
January 14th, 2009, 06:25 PM
I have this layout.

http://coflash.com/learncss/

What I am trying to do, is make it so the layout stretches to the bottom of the page, no matter how big the browser window is. I have searched google and so many other places, not getting a definitive answer on any of them. Some people even say to use Javascript to do it, but there has to be a CSS way.

There's the blue part (header) at the top, red part (middle) for the content etc, and the green part (footer) for.. the footer. The padding: 50px gap at the top is needed for a BG later.

I'm trying to get the red part to stretch to the height of the browser at any time. Can anyone help? Thank you.
Jeff Wheeler
January 14th, 2009, 06:40 PM
In a practical layout, you’ll use Faux Columns (http://www.alistapart.com/articles/fauxcolumns/).
philljc
January 14th, 2009, 06:48 PM
I read that article before, but I don't see how I can apply it to my design. For any div I apply it to, the layout goes a bit whacky.
Jeff Wheeler
January 14th, 2009, 06:50 PM
You’ll want the bg to be applied to the outermost possible element; this can frequently be the <body>, unless there’s another background on that element. Center the background there, and it’ll continue down the rest of the page without problems.
philljc
January 14th, 2009, 06:52 PM
It does continue to the end of the page, but my layout in the link I provided still just sits in the middle. So the body stretches, but nothing else does.
philljc
January 14th, 2009, 06:56 PM
Ok. I got it to work by making the middle 100% in height, but the problem now is that there seems to be a height that the page is. As in, theres a scrollbar that scrolls down further than any height I have provided.
Jeff Wheeler
January 14th, 2009, 06:56 PM
I’m not sure I understand what you’re saying. Don’t you want it to extend to the bottom of the page, exactly like faux columns solve?
philljc
January 14th, 2009, 06:59 PM
Check this link out, its updated now. http://www.coflash.com/learncss

See how you can scroll down the page? Why is that? I did not give the middle (red part) a height, only 100% (I assumed this would just stretch to the bottom) so I don't see why it's actually able to scroll down that far.

Is it because padding / heights add to the overall size? If so how do I combat that?
Jeff Wheeler
January 14th, 2009, 07:06 PM
It depends on your browser and I’m using Safari … so:

Notice how the height is exactly the same as your viewport (the frame of the page area)? 100% means 100% of the height of the page, which is much larger than what you want. Use faux columns to create the red background, covering it where necessary with alternative backgrounds, and then use something like footerStickAlt (http://www.themaninblue.com/experiment/footerStickAlt/) to keep the green area on the bottom of that.
philljc
January 14th, 2009, 08:47 PM
I did use faux columns, but now I don't know how to apply the footerStickAlt code. It really messes up when I apply that.
Jeff Wheeler
January 14th, 2009, 09:17 PM
What happens?

The page doesn’t seem to have changed since when you had the height: 100% stuff on there.
philljc
January 14th, 2009, 09:46 PM
The footer / rest of the layout goes to the left