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

John Boudreaux
seal-mask
.a{fill-rule:evenodd;}techdegree
John Boudreaux
Front End Web Development Techdegree Student 3,238 Points
Posted by John Boudreaux
.a{fill-rule:evenodd;}techdegree
John Boudreaux
Front End Web Development Techdegree Student 3,238 Points

Sticky Footer Not Sticking

See my code below. I cant figure out why the sticky footer is not sticking. I tried adding margin: 0; to the body and I have also tried taking the .wrap out of the media query. No luck yet. Any suggestions?

Thanks!!!

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Best City Guide</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrap"> <header class="main-header"> <div class="container"> <h1 class="name"><a href="#">Best City Guide</a></h1> <ul class="main-nav"> <li><a href="#">ice cream</a></li> <li><a href="#">donuts</a></li> <li><a href="#">tea</a></li> <li><a href="#">coffee</a></li> </ul> </div> </header> <div class="container"> <h2>Welcome!</h2> <p>Everything in this city is worth waiting in line for.</p> <p>...</p>

<h2>Great food</h2>
<p>...</p>

</div> </div>

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

</footer>

</body> </html>

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

  • { box-sizing: border-box; }

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

}

h1 { margin-top: 0; }

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

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

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

.name { margin: 0; }

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

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

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

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

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

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

@media (min-width: 769px) {

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

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

} }

Thomas Doyle-Engler
Thomas Doyle-Engler
6,005 Points
Thomas Doyle-Engler
Thomas Doyle-Engler
6,005 Points

Is your browser expanded past 769px? I had my browser on half my screen and workspace on the other half and it didn't work and after about 5 minutes of trying to figure out if i typed something wrong.... i realized it was just my browser wasn't large enough for it to take affect.

2 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

It seems like it's working fine to me, but I had to zoom out on my browser view to see it.

:information_source: Here's another technique, not what's introduced in the course, but it will stick it like super glue regardless of the other element sizes:

.main-footer {
  /* other settings... */
  position: fixed;
  width: 100%;
  bottom: 0;
}
David Love
David Love
1,840 Points
David Love
David Love
1,840 Points

Thanks Steven Parker, works like a dream!

Naty Sipka
Naty Sipka
5,212 Points
Naty Sipka
Naty Sipka
5,212 Points

Thank you, that finally worked for me! :)

renhe
renhe
10,282 Points

With this solution, is the wrapper still necessary?

venkateshwarluyagatilee
venkateshwarluyagatilee
8,793 Points
venkateshwarluyagatilee
venkateshwarluyagatilee
8,793 Points

make sure you give some space before and after "-" sign ........(100vh - 89px);