Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Oct 2, 2012, 09:52 AM   #1
Hexiii
macrumors 6502a
 
Hexiii's Avatar
 
Join Date: Jun 2011
Location: Prague, Czech Republic
Footer

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.
Hexiii is offline   0 Reply With Quote
Old Oct 2, 2012, 10:09 AM   #2
lucasgladding
macrumors 6502
 
Join Date: Feb 2007
Location: 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.
lucasgladding is offline   0 Reply With Quote
Old Oct 2, 2012, 10:57 AM   #3
Hexiii
Thread Starter
macrumors 6502a
 
Hexiii's Avatar
 
Join Date: Jun 2011
Location: Prague, Czech Republic
Quote:
Originally Posted by lucasgladding View Post
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?
Hexiii is offline   0 Reply With Quote
Old Oct 2, 2012, 11:44 AM   #4
lucasgladding
macrumors 6502
 
Join Date: Feb 2007
Location: Waterloo, Ontario
 
Quote:
Originally Posted by Hexiii View Post
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 by lucasgladding; Oct 2, 2012 at 01:45 PM.
lucasgladding is offline   0 Reply With Quote
Old Oct 2, 2012, 12:27 PM   #5
Hexiii
Thread Starter
macrumors 6502a
 
Hexiii's Avatar
 
Join Date: Jun 2011
Location: Prague, Czech Republic
Quote:
Originally Posted by lucasgladding View Post
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 by Hexiii; Oct 2, 2012 at 12:53 PM.
Hexiii is offline   0 Reply With Quote
Old Oct 2, 2012, 01:44 PM   #6
lucasgladding
macrumors 6502
 
Join Date: Feb 2007
Location: Waterloo, Ontario
 
Quote:
Originally Posted by Hexiii View Post
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.
lucasgladding is offline   0 Reply With Quote
Old Oct 2, 2012, 02:08 PM   #7
Hexiii
Thread Starter
macrumors 6502a
 
Hexiii's Avatar
 
Join Date: Jun 2011
Location: Prague, Czech Republic
Quote:
Originally Posted by lucasgladding View Post
I would be happy to look. Let me know when it's up.
it is already
Hexiii is offline   0 Reply With Quote
Old Oct 2, 2012, 05:08 PM   #8
lucasgladding
macrumors 6502
 
Join Date: Feb 2007
Location: Waterloo, Ontario
 
Quote:
Originally Posted by Hexiii View Post
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 by lucasgladding; Oct 2, 2012 at 05:15 PM.
lucasgladding is offline   0 Reply With Quote
Old Oct 3, 2012, 12:28 AM   #9
Hexiii
Thread Starter
macrumors 6502a
 
Hexiii's Avatar
 
Join Date: Jun 2011
Location: Prague, Czech Republic
Quote:
Originally Posted by lucasgladding View Post
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 by Hexiii; Oct 3, 2012 at 12:36 AM.
Hexiii is offline   0 Reply With Quote
Old Oct 5, 2012, 11:41 AM   #10
Hexiii
Thread Starter
macrumors 6502a
 
Hexiii's Avatar
 
Join Date: Jun 2011
Location: Prague, Czech Republic
It works now, I just had to put some thought and order into it
Hexiii is offline   0 Reply With Quote
Old Oct 5, 2012, 12:11 PM   #11
NathanCH
macrumors 65816
 
NathanCH's Avatar
 
Join Date: Oct 2007
Location: Stockholm, Sweden
Send a message via Skype™ to NathanCH
Quote:
Originally Posted by lucasgladding View Post
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
__________________
Design/Development Portfolio: Cetan.ca
NathanCH is offline   0 Reply With Quote
Old Oct 5, 2012, 03:09 PM   #12
lucasgladding
macrumors 6502
 
Join Date: Feb 2007
Location: Waterloo, Ontario
 
Quote:
Originally Posted by Hexiii View Post
It works now, I just had to put some thought and order into it
Glad to hear it. The code looks great.
lucasgladding is offline   0 Reply With Quote
Old Oct 6, 2012, 02:40 AM   #13
Hexiii
Thread Starter
macrumors 6502a
 
Hexiii's Avatar
 
Join Date: Jun 2011
Location: Prague, Czech Republic
Quote:
Originally Posted by lucasgladding View Post
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.
Hexiii is offline   0 Reply With Quote
Old Oct 8, 2012, 09:06 PM   #14
lucasgladding
macrumors 6502
 
Join Date: Feb 2007
Location: 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
lucasgladding is offline   0 Reply With Quote
Old Oct 9, 2012, 02:20 PM   #15
Hexiii
Thread Starter
macrumors 6502a
 
Hexiii's Avatar
 
Join Date: Jun 2011
Location: Prague, Czech Republic
Quote:
Originally Posted by lucasgladding View Post
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
Hexiii is offline   0 Reply With Quote
Old Oct 10, 2012, 11:19 AM   #16
dhussey111
Banned
 
Join Date: Sep 2012
the sticky footer is not good.. i don't like it..
dhussey111 is offline   0 Reply With Quote
Old Oct 10, 2012, 11:12 PM   #17
lucasgladding
macrumors 6502
 
Join Date: Feb 2007
Location: Waterloo, Ontario
 
Quote:
Originally Posted by Hexiii View Post
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
I'm glad I could help.

Kind regards

Lucas
lucasgladding is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Main page sidebar runs under footer dylanryan Site and Forum Feedback 1 Apr 13, 2014 06:29 AM
Simple CSS question header, footer and expanding middle whitedragon101 Web Design and Development 4 Apr 7, 2014 01:51 AM
how to decrease margins and header and footer on pages fine0023 Mac Basics and Help 1 Aug 7, 2013 10:25 PM
Brother HL2270DW Web Print Footer/Header Cropped YaddaMinski Mac Peripherals 2 Dec 26, 2012 10:11 AM

Forum Jump

All times are GMT -5. The time now is 09:20 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC