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

Question

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

Answer 1 · 2017-07-16T12:12:11Z

July 16, 2017 12:12pm

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!

Answer 2 · 2017-09-06T18:31:50Z

September 6, 2017 6:31pm

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.

Answer 3 · 2017-08-09T15:55:27Z

August 9, 2017 3:55pm

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;
}

Welcome to the Treehouse Community

Looking to learn something new?

dojewqveaq

dojewqveaq

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

3 Answers

Jennifer Nordell

Jennifer Nordell

dojewqveaq

dojewqveaq

Jennifer Nordell

Jennifer Nordell

Daniel B

Daniel B

Navneet Singh

Navneet Singh