Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
sakatagintoki
12,624 PointsToo much whitespace after footer
Making a mock-website to practice CSS and Java. On my homepage, where the content ends, the footer appears, and the page ends (see right). But on another page I'm creating (see left), after the footer, there is too much whitespace.
I doubt this is an uncommon problem, so any advice on things I can check for to fix this?
Thx ~Jay
3 Answers
Brandon Barrette
20,485 PointsSo I think you mean the whitespace after the footer? This happens when there isn't a lot of content on the page. What you are looking for is a sticky footer that is always on the bottom of the page, no matter how big the web browser. There are lots of approaches:
http://ryanfait.com/sticky-footer/
http://css-tricks.com/snippets/css/sticky-footer/
http://www.cssstickyfooter.com/using-sticky-footer-code.html
Shawn Flanigan
Courses Plus Student 15,815 PointsJay: Hard to say without seeing any of your code, but check to make sure you have all of your divs closed properly. I've had this problem a few times in the past and it turned out I'd missed a closing
</div>
tag or had an extra one thrown in there somewhere.
sakatagintoki
12,624 PointsSorry, you're right, I appreciate that. But because I don't know what the problem is precisely I didn't want to just Ctrl + C, Ctrl + V my entire main.css file. I think I might have almost managed myself by setting html { height: 100% } but I'll need to tinker a little more.
Wayne Priestley
19,579 PointsHi Jay,
Without seeing your code, i'm guessing you might have an issue with one of you height settings in another piece code.
Do you have your footer position set to bottom?
sakatagintoki
12,624 PointsIt did collapse when I defined the height property for one of my divs. But it could have been any number of things. So I decided to re-do the page altogether.
You mean set footer { position: bottom }; ?
Shawn Flanigan
Courses Plus Student 15,815 PointsShawn Flanigan
Courses Plus Student 15,815 PointsBrandon: This was my first thought, too, but notice the scrollbars in the image...it looks like there's plenty of content higher up on the page.
sakatagintoki
12,624 Pointssakatagintoki
12,624 PointsIt was a much shorter page and I guessed that might be the problem. These links look promising, I'll take a look.
sakatagintoki
12,624 Pointssakatagintoki
12,624 PointsI couldn't get stickyfooter to work for some reason, but I was sketching some things and decided to re-do the design for the page altogether. It should have more content so this shouldn't happen again. It might have also been a case of my div structure being messy causing something to collapse somewhere.
That said, a tried and tested solution like those in the links you've given me was exactly what I was looking for when I posted. I'll book mark them and save them for later.
You get the best answer. I tip my fedora to you goodsir.
sakatagintoki
12,624 Pointssakatagintoki
12,624 PointsActually Shawn you were right after all. It was nothing to do with the amount of content on my page. It was to do with a complicated series of float: rights I'd applied to some divs that was causing the whole layout to collapse.