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

CSS

Posted by Cian Mac Mahon
Cian Mac Mahon
17,657 Points

CSS Layout Techniques footer at bottom of browser window

I'm following along with the CSS Layout Techniques videos, and at some stage it instructions on how to make a footer always be at the bottom of the viewport.

When this is done in the video, however, it seems to make the footer sit way below the bottom of the browser window, and this is what I see when I am trying to do this myself (as can be seen here - http://web-ji61rl73f8.treehouse-app.com/)

Does anybody know if I am doing something wrong? I am using the technique described in the course

  html,
  body,
  .main-wrapper,
  .col {
    height: 100%;
  }

3 Answers

Eric Martz
Eric Martz
16,007 Points
Eric Martz
Eric Martz
16,007 Points

I can't get to your workspace, but if the .col class and .main-wrapper classes are set to 100%, isn't that going to push the footer out of the viewport range? This is just a guess, but it would be where I would first look.

EDIT: After looking at the code, having the main-wrapper set to 100% is ok, since the footer is in the main-wrapper, but the col class should not be set to 100%.

Cian Mac Mahon
Cian Mac Mahon
17,657 Points
Cian Mac Mahon
Cian Mac Mahon
17,657 Points

Nicholas Olsen Hi Nicholas! Here is a codepen - http://codepen.io/anon/pen/Eyuwn

It should be noted that the codepen isn't actually displaying the same result that I see when I use the CSS in a browser window - In a browser window the right-hand column stretches down to the bottom.

Thanks for taking a look for me! I think that Eric Martz is on the right track - playing around with his suggestion

Eric Martz
Eric Martz
16,007 Points
Eric Martz
Eric Martz
16,007 Points

I was looking at the CSS, and I noticed in several places that you have padding set by pixels. I'd be interested in someone else confirming this, or telling me I'm off-track, but I think what is happening is the padding set in pixels is forcing footer below the viewport.

For instance, on the main-banner class you add 35px of padding on the top and bottom of the div. I think the browser has no choice but to push the footer lower than you would like to handle this.

There are a couple option I can think of to handle this:

  1. Consider converting your padding to percentages rather than using pixel units.
  2. Consider using a sticky footer, which always shows the footer. Here's a link to how to do a sticky footer: http://css-tricks.com/snippets/css/sticky-footer/
Cian Mac Mahon
Cian Mac Mahon
17,657 Points
Cian Mac Mahon
Cian Mac Mahon
17,657 Points

Thanks, Eric Martz, I'll look into that! I've simply been following along with the tutorial (which uses pixels, which I did think was strange at the time).