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

Posted by Learning Coding
Learning Coding
7,134 Points

Sticky footer question

When I tried to use calc(100vh - 89px) as minimum height, it didn't work. The sticky footer didn't stay at the bottom of the page. It moved up my screen. I am using Chrome by the way. Can somebody help?

Cheo R
Cheo R
37,150 Points

Can you post what your code looks like?

Learning Coding
Learning Coding
7,134 Points

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

For some reason, the sticky footer is stuck halfway up my screen, not at the bottom. I am using Chrome by the way. Does anyone known if this is a browser-related issue? Thank.

1 Answer

Perry Marquer
Perry Marquer
11,243 Points
Perry Marquer
Perry Marquer
11,243 Points 
<body>
  <div class="wrapper">

      content

    <div class="push"></div>
  </div>
  <footer class="footer"></footer>
</body>

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;

  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

Taken from https://css-tricks.com/couple-takes-sticky-footer/