PDA

View Full Version : Another 100% height issue....



lilqhgal
Apr 11th, 2007, 07:37 PM
I cant seem to figure out my problem. I have a header/footer with content in the middle. Trying to get the "footer" to stick to the bottom and then expand with content, or at least be 100% height with no content. Here's the link:

http://www.thefamilystoneburner.com/ -- while this one looks ok, click the 2nd link down ("my new ring") and you'll note now that content is much larger, the height doesn't "expand".... I'm using FF btw. not sure what this does yet in IE. Here's the CSS file: http://www.thefamilystoneburner.com/templates/wedding/css/wedding.css

Any help is greatly appreciated!!!

_Aerospace_Eng_
Apr 11th, 2007, 07:50 PM
Instead of height:100%; on inner_wrapper you need to use min-height:100%;

For IE6 you can use

* html #inner_wrapper {
height:100%;
}

Excavator
Apr 11th, 2007, 11:13 PM
Hello lilqhgal,
I like that layout.

I have an example of placing a footer at the bottom of the window that is pretty much bullet-proof. Maybe you can adapt it to your site.
See it at: http://www.nopeople.com/CSS/full-height-3column/

koyama
Apr 11th, 2007, 11:48 PM
I have an example of placing a footer at the bottom of the window that is pretty much bullet-proof. Maybe you can adapt it to your site.
See it at: http://www.nopeople.com/CSS/full-height-3column/
Excavator,
A minor issue may be that the footer is always outside to viewport (no matter how tall the window is) when the page is scrolled to the top.

Another technique could be to add some bottom padding to the content area and then absolutely position the footer at the bottom of this area. This works for footers of fixed height.

There is then the problem how to do this if the footer has unknown height. I haven't been looking for such a solution though, but don't really have any ideas at the moment how to solve this. Well, there is of course tables :o