Footer

Hexiii

macrumors 65816
Original poster
Jun 30, 2011
1,113
373
Prague, Czech Republic
I've been trying to make footer stick to bottom. (When the content of the page isn't too long it would be in the middle of the page)

But I can't come with a solution which would work both when the content is smaller than the whole display and when the content doesn't fit the display.

I've tried google search, but that doesn't really help.

When I work with percentages, it only takes percentages of the current display, not the whole page. So if it's on the bottom (bottom:0) it works when the content is smaller than a screen, but when it doesn't fit just one screen, the footer is on the bottom of the screen but there's the rest of the content underneath.

Anybody has any simple solution?

/e The same is with width. When I make it 100% it's usually ok, but when you make the screen smaller and you have to scroll to the side, the footer ends on the border of the first displayed content.
 

lucasgladding

macrumors 6502
Feb 16, 2007
319
1
Waterloo, Ontario
This is the approach I use:
http://ryanfait.com/sticky-footer/

Both the html and body tags need to have 100% height. You need a page wrapper (excluding the footer) with a min-height of 100%, and you use negative bottom margins to free space for the footer. The footer doesn't need any special positioning, but it does need to be a fixed height that matches the negative bottom margins on the wrapper.

The additional height declarations aren't necessary in Safari, but they might be needed for others.
 
Comment

Hexiii

macrumors 65816
Original poster
Jun 30, 2011
1,113
373
Prague, Czech Republic
This is the approach I use:
http://ryanfait.com/sticky-footer/

Both the html and body tags need to have 100% height. You need a page wrapper (excluding the footer) with a min-height of 100%, and you use negative bottom margins to free space for the footer. The footer doesn't need any special positioning, but it does need to be a fixed height that matches the negative bottom margins on the wrapper.

The additional height declarations aren't necessary in Safari, but they might be needed for others.
Yeah, I tried this, but it doesn't really work well, at least for me :) It's too much at the bottom (under the screen) :)

Maybe it's due to my margins as he also mentiones?
 
Comment

lucasgladding

macrumors 6502
Feb 16, 2007
319
1
Waterloo, Ontario
Yeah, I tried this, but it doesn't really work well, at least for me :) It's too much at the bottom (under the screen) :)

Maybe it's due to my margins as he also mentiones?
It definitely works. I use it all the time.

The margins would be my guess. Do you have the page online somewhere? I would be happy to take a look
 
Last edited:
Comment

Hexiii

macrumors 65816
Original poster
Jun 30, 2011
1,113
373
Prague, Czech Republic
It definitely works. I use it all the time.

The margins would be my guess. Do you have the page online somewhere. I would be happy to take a look
Uh... not yet, but there's a grid of divs (3 rows x 5 divs) and each row has 30px margin-top.

However I can upload it on a free hosting, I guess the ads on the top shouldn't be problem. It's not optimised for all browsers yet (It works best in latest Safari).

And there are not many settings for the footer since I deleted the mess after trying. I am going to get back to it after finishing some other stuff.

Would you take a look at it if I uploaded it?

/e http://fcecountdown.ic.cz ignore the domain name, it was used for something else
 
Last edited:
Comment

lucasgladding

macrumors 6502
Feb 16, 2007
319
1
Waterloo, Ontario
Uh... not yet, but there's a grid of divs (3 rows x 5 divs) and each row has 30px margin-top.

However I can upload it on a free hosting, I guess the ads on the top shouldn't be problem. It's not optimised for all browsers yet (It works best in latest Safari).

And there are not many settings for the footer since I deleted the mess after trying. I am going to get back to it after finishing some other stuff.

Would you take a look at it if I uploaded it?

/e http://fcecountdown.ic.cz ignore the domain name, it was used for something else
I would be happy to look. Let me know when it's up.
 
Comment

lucasgladding

macrumors 6502
Feb 16, 2007
319
1
Waterloo, Ontario
it is already
I just checked the site, and I don't see the CSS for the sticky footer. I checked the DOM inspector to be sure I wasn't missing something. Are you sure the most recent code is online?

In case it is just a stylesheet that's not being included, you're going to run into problems because there is no main wrapper. For this to work, there can only be two layout blocks inside the body. You need to wrap everything except the footer in one block, and that gets the min-height and the negative margin. The footer is the only other child to the body.
 
Last edited:
Comment

Hexiii

macrumors 65816
Original poster
Jun 30, 2011
1,113
373
Prague, Czech Republic
I just checked the site, and I don't see the CSS for the sticky footer. I checked the DOM inspector to be sure I wasn't missing something. Are you sure the most recent code is online?

In case it is just a stylesheet that's not being included, you're going to run into problems because there is no main wrapper. For this to work, there can only be two layout blocks inside the body. You need to wrap everything except the footer in one block, and that gets the min-height and the negative margin. The footer is the only other child to the body.
There is a wrapper, it's called div class="main", and there's everything except the top bar and the footer.

And as I said before, I deleted the sticky footer code and will come back to it later.

/e and yeah, there's is the blue bar with ads on the top, but that won't be there.
 
Last edited:
Comment

NathanCH

macrumors 65816
Oct 5, 2007
1,052
0
Stockholm, Sweden
This is the approach I use:
http://ryanfait.com/sticky-footer/

Both the html and body tags need to have 100% height. You need a page wrapper (excluding the footer) with a min-height of 100%, and you use negative bottom margins to free space for the footer. The footer doesn't need any special positioning, but it does need to be a fixed height that matches the negative bottom margins on the wrapper.

The additional height declarations aren't necessary in Safari, but they might be needed for others.
Thanks for this
 
Comment

Hexiii

macrumors 65816
Original poster
Jun 30, 2011
1,113
373
Prague, Czech Republic
Glad to hear it. The code looks great.
But there is still one problem, when I make the window smaller that I have to scroll, there is a white rectangle above the footer which might be the push div or it's caused by the negative margins.

Is there any solution for this? Since the background is gradient from white to gray, it doesn't really look good.
 
Comment

lucasgladding

macrumors 6502
Feb 16, 2007
319
1
Waterloo, Ontario
Hexiii

It's actually the default body background-color that you're seeing. The gradient background-image is only as high as the window, so anything beyond the window height is going to be the background-color. Personally, I would resolve the issue by adding a background-color before the background-image gradient. Use the second color from the gradient for the color, and things should be seamless.

Let me know if that doesn't make sense. If you specify a background-color, you should see what I mean right away.

Kind regards

Lucas
 
Comment

Hexiii

macrumors 65816
Original poster
Jun 30, 2011
1,113
373
Prague, Czech Republic
Hexiii

It's actually the default body background-color that you're seeing. The gradient background-image is only as high as the window, so anything beyond the window height is going to be the background-color. Personally, I would resolve the issue by adding a background-color before the background-image gradient. Use the second color from the gradient for the color, and things should be seamless.

Let me know if that doesn't make sense. If you specify a background-color, you should see what I mean right away.

Kind regards

Lucas
Ah thank you. I'll definitely try that.

Maybe it might work If I made a stripe of a png gradient and then repeat-x.

/e Worked great, thank you very much :)
 
Comment
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.