Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Nope... footer won't stick to the bottom of the page...

Ok, I don't know what I'm doing wrong here... My code seems to match exactly Guil's code.

Css:

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

@media (min-width: 769px) {

  .wrap {
    min-height: 100vh: 
    }

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

HTML:

<!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>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
      <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
    </div>
  </div>

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

Moderator edited: Added markdown so that the code renders properly in the forums. -JN :sparkles:

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! You're doing great, but your code doesn't quite match what Guil has. At around 3:49 of the video he changes the CSS in the "wrap" class to this:

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

Try implementing this change and see if it works for you, but let us know if you're still stuck! :sparkles:

I did.. Still doesn't work.. Before he made this change, his footer was already sticking to the bottom of the page... mine isn't... even after I use the calc function.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

The easiest way to troubleshoot this for you is if we can take a look at your workspace. But because your workspace is private to you you'll need to make a "snapshot" of it. If you look on the upper right-hand side of your workspace you'll see a camera icon. Clicking this will create a snapshot which we can then fork. After you've created it it, post a link here, and we'll have a look :smiley:

Daniel B
Daniel B
4,370 Points

Hey Eric, its probably too late to answer this, but you have a ':' instead of a ';' at the end of your min-height: 100vh line.

Navneet, you need to place your min-height line into your .wrap rule, at the moment you have it placed in your .container rule. Also on your html page, you need to place your wrap div above your header, you have it placed underneath it.

Navneet Singh
Navneet Singh
2,424 Points

Can you guys help on this, I am also getting the same issue, footer is sticking to bottom but with scroll bar(which should not be there). In console the size of footer is 82px, With calc(100vh - 82px) it's not working but if i increase the value calc(100vh - 310px) then the scroll bar will go away. So why on 82px it's not behaving as it should be:

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/stylesheet.css">
<title>Best City Guide</title>
</head>


<body>

  <header class="main-header">
    <div class="wrap">
    <h1 class="name"><a href="#"> Best City Guide </a> </h1>
    <ul class="navigation">
      <li> <a href ="#"> Ice Cream </a> </li>
      <li> <a href ="#"> Donut </a> </li>
      <li> <a href ="#"> Tea </a> </li>
      <li> <a href ="#"> Coffee </a> </li>
    </ul>
  </header>
 <div class="container">
  <main>
    <h2> Welcome!</h2>
    <p>Lorem ipsum dolor sit amet, cum eius ancillae eleifend ut, mel eu ullum aeque,
      dicam deserunt forensibus mel eu. Vim dolorum omnesque posidonium et.
      His omnis nostrum ad, eu qui modus maluisset. Et accusamus consequat nec,
      eu eam eius legere nusquam, aliquam sensibus has et. Vix ea vocent dissentias,
      tota option torquatos te usu, per nemore minimum ei. Vix te alia vide ignota.
    </p>
  </main>

<section>
  <h2> The Food </h2>
  <p>Summus dolor plures dies manere non potest? Sed ad haec, nisi molestum est,
     habeo quae velim. Sed tamen enitar et, si minus multa mihi occurrent,
     non fugiam ista popularia. Quia nec honesto quic quam honestius nec turpi
     turpius.
  </p>
</section>
</div>
</div>

  <footer>
    <span> &copy;2020 For more information, Please visit again.</span>
  </footer>

</body>

</html>
*{
  box-sizing: border-box;
}

body{
  color:#3a3a3a;
  margin-bottom: 0;
}

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

.wrap {
  width:70%;
  margin:0 auto;
}
  .container {
    width:70%;
    margin:0 auto;
    min-height: calc(100vh - 82px);
  }

section{
  margin-bottom: 0;
}

.main-header{
  background-color:#3acec2;
  padding:40px 0;
}


h1{
  margin:0;
  padding:0;
}


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