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

Posted by Brianna Nash
Brianna Nash
4,933 Points

Scroll Bar Still Present

After I put in the calc rule for the .wrap and refreshed my screen I still have a small scroll. Can someone please tell me what I did wrong? Or maybe is it a glitch?

I'm on Chrome.

/* ================================= Base Element Styles ==================================== */

  • { box-sizing: border-box; }

body { line-height: 1.6; color: #3a3a3a; }

a { color: #fff; text-decoration: none; }

/* ======================== Base Layout Styles ============================ */

/* ---- Navigation ---- */

.name { margin: 0; }

/* --- Layout Containers --- */

.container { padding-left: 1em; padding-right: 1em; }

.main-header { padding: 1.5em 0; background: #3acec2; }

.main-footer { text-align: center; padding: 2em 0; background: #d9e4ea; }

/* ======================== Media Queries ============================ */

@media (min-width: 769px) {

.wrap {
    min-height: calc(100vh - 89px);
}

.container {
    width: 70%;
    max-width: 1000px;
    margin: 0 auto;
}

}

2 Answers

Ronald Lira
Ronald Lira
12,217 Points
Ronald Lira
Ronald Lira
12,217 Points

Hello,

There is nothing wrong with your code, but the issue you see is because you are performing a fix calculation. You are assuming that the footer total height is 89px, which in my case is not, so I had to adjust it to make it work. Check the video again at minute 03:12, then open the developer tools and check what is the total height in your case. Finally, replace the value in your formula.

I found a better workaround here: https://teamtreehouse.com/community/only-shows-half-of-the-footer-unless-i-scroll-down. All credits to @gregkaleka

Hope it helps,

Ronald

Brianna Nash
Brianna Nash
4,933 Points

Someone told me to just use a higher number and that seemed to fix it. When I looked with devtools it said the height was indeed 89px so that's what I had put. Not sure why it wasn't working, but using 106 instead of 89 worked for me.

Thanks so much for helping. I'll def take a look at that link.

Darth R3id4k
PLUS
Darth R3id4k
Courses Plus Student 10,125 Points
Darth R3id4k
Darth R3id4k
Courses Plus Student 10,125 Points

I have had problem too but I find that author had changed css file for this lecture without warning: He added:

p:last-child {
    margin-bottom: 0;
}

and had changed padding from 1.0em 0; to

.main-header {
padding: 1.5em 0;
}

Without these changes my code doesn't work.

vikas pal
vikas pal
11,563 Points

Darth R3id4k! Thnks, you helped me to solve this issue. And yeah, he needs to inform about these changes. Happy coding:-D