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 CSS Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

Andrea Monty
Andrea Monty
2,724 Points
Posted by Andrea Monty
Andrea Monty
2,724 Points

Sticky footer height

Hi everyone this is not a question but this is some help as the video seems off a little. For the calc function Guil uses 89px but if you inspect your footer it should say 112px. So you need to adjust the function. Instead of calc(100vh - 89px) adjust it to calc(100vh - 112px). This should take the scrollbar out completely.

5 Answers

Brian Jensen
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Brian Jensen
Treehouse Staff
Brian Jensen
.a{fill-rule:evenodd;}techdegree seal-36
Brian Jensen
Treehouse Staff

It is because of this CCS rule that removes padding and margins from the total dimension:

* {
  box-sizing: border-box;
}

So it removes the padding from this, on its final height calculation:

.main-footer { 
    text-align: center;
    padding: 2em 0;
    background: #d9e4ea;
}
Brian Jensen
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Brian Jensen
Treehouse Staff
Brian Jensen
.a{fill-rule:evenodd;}techdegree seal-36
Brian Jensen
Treehouse Staff

I was wondering if it was a browser issue ignoring the box-sizing that was causing you to see 112px.

But I got 89px like the video in Firefox, Chrome, and Safari.

Screen Shot 2016-12-12 at 14.49.00.png

Screen Shot 2016-12-12 at 14.51.55.png

Screen Shot 2016-12-12 at 14.48.31.png

What browser are you using?

Andrea Monty
Andrea Monty
2,724 Points
Andrea Monty
Andrea Monty
2,724 Points

I was just making an observation as others had had problems. This was by no means to become an attack on me and i will not be brought into the drama. Whatever you're seeing is obviously different. I have been studying this for over a year through different courses and this happens. I am done with this conversation.

Andrea Monty
Andrea Monty
2,724 Points
Andrea Monty
Andrea Monty
2,724 Points

I am using Chrome and this particular video lesson i do not think it had the box-sizing property. But I am not sure now as I am on another lesson now.

Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points
Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

I see this as an easier approach towards creating a sticky footer:

https://teamtreehouse.com/library/css-layout-basics/positioning-page-content/fixed-positioning

Yassin Mzaik
PLUS
Yassin Mzaik
Courses Plus Student 7,454 Points
Yassin Mzaik
Yassin Mzaik
Courses Plus Student 7,454 Points

just had a very similar issue,

its because the <p> element inside your footer has a mragin,

remove it and the height should be 89px

use this code in styles.css

footer p { margin: 0; }

ywang04
ywang04
6,762 Points
ywang04
ywang04
6,762 Points

Finally, I found that Guil uses the <span> element under <footer> instead of <p> element at the end of this section. Previous provided project file uses <p> element.

    <footer class="main-footer">
        <span>&copy;2015 Residents of The Best City Ever.</span>
    </footer>

If we use <p> element, the height is not 89px due to the margin top and bottom value for <p> element.