0

This is the website I'm working on:

http://uber.imu.uiowa.edu/isa/

The footer was floating to the top of the page since there wasn't enough content, so I used this trick to push the footer to the bottom:

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Problem is, there is too much space and it added a scrollbar. How do I fix it so the footer is on the bottom of the page, but doesn't add that scrollbar?

Kate Gregory
  • 18,808
  • 8
  • 56
  • 85
Maddy
  • 3
  • 1
  • There is nothing wrong in what you did. The Scroll Bar came as there are lot of Large Fonts Sized Contents. Make your site fonts smaller and reduce image sizes. I don't think anything else can save you in this situation... :) – Vijay Sarin Aug 21 '12 at 20:33
  • Thanks for everyone who helped. Ultimately, it was changing the .wrapper margin from ems to pixels to match the other change I made that solved the exact problem I was looking to solve. Now I have a problem with the other pages still having problems, which may have to do with the fact that I used a different name for my "right" DIV. Any ideas are helpful! – Maddy Aug 23 '12 at 18:02

4 Answers4

0

Well, keeping your current method, I'd just decrease the height of .push:

.push{
    height:50px;
}

But that's not the best way to do this.

http://jsfiddle.net/VFqTv/

In this example, you give the body tag a background color (or image) that is the same as the footer, then the content fills up as much space as it needs. The footer lies right below it, and the remaining part below it that flils the rest of the screen acts as a filler of sorts.

Charlie
  • 11,380
  • 19
  • 83
  • 138
0

The current method is great, i use it all the time. You just forgot to set the negative bottom margin of the wrapper to the same height as footer and footer-push. Update your .wrapper css to this margin: 0 auto -300px; Did the trick for me in the chrome inspector.

Pevara
  • 14,242
  • 1
  • 34
  • 47
0

The Contents in you webpage are too much to fit on the single screen. So if you want to remove the scroll bar, either you have to reduce the font and the contents size or you have to remove some contents.

But if you want to reduce some vertical space in webpage remove height:200px; from .push {} and add margin-top:100px;

ygssoni
  • 7,219
  • 2
  • 23
  • 24
0

The image of footer is too big, i think you have to resize your image in photoshop then use it in the footer, or put the image over your footer.

eli
  • 11
  • 2