CSS CSS Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

Brianna Nash
Brianna Nash
Front End Web Development Techdegree Student 4,805 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,216 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
Front End Web Development Techdegree Student 4,805 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.

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
8,545 Points

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