The short answer is that you need to give your footer a negative top margin
equal to it's height, which will lift it up above the bottom of the window.
So, assuming your footer is 60px tall, you need to add margin-top: -60px; to
it's rule. The other thing to keep in mind is that IE does not recognize
min-height.
But the Man in Blue article Joel mentioned is a good read on the topic.
Eridius wrote:
>
> This is a off topic because there should be a solution using css but i
> can't figure it out. I am wanting to make a certain div height be 100% of
> what it can be(so the footer is at the bottom of the page i the content
> does not already push it down there). Know i though that is i say for an
> element to be 100% it means 100% of the existing room. hear is my css(BTW
> I am using a php file to generate dynamic css):
>
> html, body
> {
> margin: 0px;
> padding 0px;
> height: 100%;
> }
>
> #header
> {
> min-height: 100px;
> background: url('<?php echo $my_colors['image_folder'];
> ?>/large_gradient.png') repeat-x;
> }
>
> #footer
> {
> min-height: 60px;
> background-image: url(<?php echo $my_colors['image_folder'];
> ?>/large_gradient_reverse.png);
> background-repeat: repeat-x;
> background-position: bottom center;
> }
>
> Now when i put 100% it does not take into effect the the height of the
> header and footer which shoot the footer off the screen to the way bottom.
> I just what my footer to be at the bottom of the screen without a
> scrollbar. The only way i can think of doing to is by using the
> dimensions plug-in but it would seem that this could be done in plain css,
> can it?
>
--
View this message in context:
http://www.nabble.com/%28OT---CSS%29-setting-screen-height-to-100--tf4538042s27240.html#a12956926
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
