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

Julianna Kahn
Julianna Kahn
20,699 Points

Sticky footer still leaves scroll bars.

Actually, my footer shows 112px rather than 89px, but either way, I can't get rid of the scroll bars. I believe all the relevant code would be below:

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

/* ---- Page Elements ---- */

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

@media (min-width: 769px) {

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

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

Mark Wilkowske
Mark Wilkowske
Treehouse Moderator 16,279 Points

Hi Julianna, it may be a temporary issue with workspaces. It was for me and suddenly everything worked fine https://w.trhou.se/opt99ewqvy

3 Answers

Julianna Kahn
Julianna Kahn
20,699 Points

Actually, I am using Visual Studio with the downloaded files and not Workspaces for this course.

Julianna Kahn
Julianna Kahn
20,699 Points

Yes, I am still seeing the scrollbars. I am running in Chrome if that makes any difference. Seems to be a mystery.

Leslie Lello
Leslie Lello
Front End Web Development Techdegree Student 8,297 Points

I am getting that in FireFox, too. I am using the Treehouse Workspace. Footer is at 89px.

I was tinkering with the numbers and this seemed to work:

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

Not sure if this will work in all circumstances, though.

Julianna Kahn
Julianna Kahn
20,699 Points

I can get my code to work. I am just wondering why the footer ends up showing 112 pixels instead of 89 pixels like in the tutorial. But thanks.