Sticky Footer Being too Sticky - CSS-Tricks

This topic is empty.

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Posts
June 22, 2011 at 10:27 am #33239

Alan_Breck
Participant

Hello,

I’m working on several sites that have footers that I’ve used sticky footer techniques on. The footer does stay at the bottom of the page, but somehow it stays below the browser fold for pages that have very little content. Anyone know what I’m doing wrong? Example: http://bonusest.com/newDesign/

Thank you in advance for any help you can offer!

Best,
A.B.

June 22, 2011 at 10:47 am #82056

ArchDesignLabs
Participant

In your css take off the height 100% and that should work. You basically have like 6 height parameters fighting each other and its shoving everything down.

June 22, 2011 at 10:59 am #82057
Alan_Breck
Participant
Thank you for your response! When I tried removing
```
html, body, #wrapper { height: 100%; }
```
it shoved the footer to the middle of the page making everything look really weird. Am I missing something? Thank you again for your help – this sticky footer thing has been a thorn in my side! :-)
June 22, 2011 at 11:17 am #82059

ArchDesignLabs
Participant

The wrapper needs to stay at 100 just take it off the html body it worked in firebug

June 22, 2011 at 11:23 am #82061

ArchDesignLabs
Participant

When I remove the height 100% from html, body, #wrapper it works too! What browser are you in?

June 22, 2011 at 11:49 am #82066

Alan_Breck
Participant

I’m using Safari and Firefox. It still shoves the footer to the middle of the page. I MUST be doing something wrong! :-) I’ve left the code that way for you to see what happens.

June 22, 2011 at 11:57 am #82068

ArchDesignLabs
Participant

I dont see an issue it looks the exact same

June 22, 2011 at 12:05 pm #82069
Alan_Breck
Participant
This – footer.png is what it looks like for me. When I remove
```
html, body, #wrapper { height: 100%; }
```
and leave it at
```
body > #wrapper {height: auto; min-height: 100%;}
```
June 22, 2011 at 12:32 pm #82073

Alan_Breck
Participant

Everything I’ve tried pushes the footer way below the fold.

June 22, 2011 at 1:33 pm #82078

ArchDesignLabs
Participant

I have no idea how you are getting the footer to do whats in the png it works fine on mine. I still think the issue is declare of of the auto heights, min height 100, and height 100. Its all fighting with each other.

June 22, 2011 at 3:21 pm #82102

Alan_Breck
Participant

Mystified. I just tried playing around in Firebug, changing the code around and a lot of other things – same thing happens. Help?

June 23, 2011 at 3:40 am #82179

ArchDesignLabs
Participant

I thought maybe is was just working on my laptop and a bigger monitor would make a difference. Nope I take off the height parameter and it works fine. I will try to take another look when I get time. Too bad I am the only one helping haha

June 27, 2011 at 12:41 pm #74390

Rob MacKay
Participant

Not had chance to look at this but it was flagged as still confusing – so I thought I would bump it – anyone else? :D

June 28, 2011 at 10:51 am #82505

Alan_Breck
Participant

Thank you for bumping this up! Hope people might have some ideas. :-)

June 28, 2011 at 11:33 am #82508

Ezeke
Member

id say this is caused by your wrapper not wrapping everything.
(navigation and header are missing)

youre giving the wrapper min-height: 100%, which is the the window height including the navigation and header.
Author

Posts

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

The forum ‘CSS’ is closed to new topics and replies.