Take the 2-minute tour ×

I've read every post and google result about footer's height but I'm not able to fix this issue.

You can see my index here: http://adamaweb.com/faqme/ As you can see, I want the footer extends to the end of the page. It's not a sticky footer, I just want it to extend. But when you load the web you can see a big vertical scroll.

I thinks it appears because of the height:100% in the footer. It is possible to extend the footer without the scroll issue?

share|improve this question
Give the footer overflow: hidden; instead of height: 100%; –  Andy Dec 3 '12 at 14:08
have you tried something like the following - for your style: #footer { clear: both; height: 75px; position: fixed; bottom: 0; width: 100%; padding: 50px 210px; background-color: black; } or do overflow:hidden –  J.Wells Dec 3 '12 at 14:10
Yes the problem is definitive your fixed height of 100% on the footer. I see no option to change the height dynamically without the use of javascript. –  Sven Bieder Dec 3 '12 at 14:10
Thanks all. @andy then the footer doesn't expand. J.Wells nice one but if I resize the window the footer overlap the content. –  user1872795 Dec 3 '12 at 14:18
@user1872795 What do you mean it doesn't expand? When I do it it fills the rest of the page –  Andy Dec 3 '12 at 14:20
show 3 more comments

2 Answers

You can put the dark footer background on the body. Then you need to add a 100% wide wrapper for the page content and use the light background on the new wrapper.

And yes, as per comments, you need to remove height:100%; from the footer.

share|improve this answer
Yep, I thought that workaround too but I would like to se if there is another way withouth changing the div structure. –  user1872795 Dec 3 '12 at 14:17
add comment

Just set your html background to the same as your footer:

   html, body {
share|improve this answer
add comment

Your Answer


