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

Aaron Selonke
Aaron Selonke
10,323 Points
Posted by Aaron Selonke
Aaron Selonke
10,323 Points

min-height: calc(100vh - 89px); almost has the right effect but Still getting the Scroll bar

After adding the calc function to the bottom of the CSS sheet, the main container of the page should take the full view-port minus the length of the footer element... its not quite there, there is still a mysterious gap between the footer element and the rest of the page.

Can see the mysterious GAP screenshot here http://uploadpie.com/XIgrR

and here is the footer showing a height of 89px (just to confirm) http://uploadpie.com/LafKr

<!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="wrapper">
    <header class="main-header">
    <div class="container">
        <h1 class="name">Best City Guid</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>

    <h2>Great food</h2>
    <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
    </div>

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

</body>
</html>

*{
box-sizing: border-box;
}


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



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



footer {text-align: center;}



  .name{margin-top: 0;}



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

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

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

.main-header {
    background: #3acec2;
  color: #fff;

}

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

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

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






/* ================================= 
 MEDIA QUERIES
==================================== */

/* min width here, means 769px or wider */

@media (min-width: 769px) {

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



.container {
  width: 70%;
  margin: 0 auto;
  max-width: 1000px;
}
}
Aaron Selonke
Aaron Selonke
10,323 Points
Aaron Selonke
Aaron Selonke
10,323 Points

Yes, that was it.

It was not obvious that it would be the <P> element even using the developer tools, how did you know it was the P element? Also, Where did the <P> element get its margin from, it was not styled in the CSS sheet...?

5 Answers

M W
M W
3,446 Points
M W
M W
3,446 Points

I had a a lot of these sorts of issues initially. Now I find that the developer tools on chrome or Firefox are great at showing up which element is likely causing the issue.

You may well use this already but if not on Windows Ctrl Shift C brings up the developer tools window with inspect active. Now wherever you direct the cursor it visually shows the extent of content, padding, border and margin of whichever element you are hovering over.

If you do this and inspect the offending <p> which Ana highlighted then it should confirm the offending margin (hopefully!!!). :)

Ana Enríquez
Ana Enríquez
8,977 Points
Ana Enríquez
Ana Enríquez
8,977 Points

(Sorry for the first comment, I tought it was an aswer, I have deleted the comment and post it here the original answer)

Hi! I have been looking at your code in a codepen I have found your issue:

The gap that you see between the wrapper and the footer is created by the margin-bottom of the last paragraph that is overflowing trough the .wrapper. If you remove the last margin-bottom of the p element you shouls see it correctly!

Please tell me if this helped you (sorry if my english is not very well, is not my native language)

Ana Enríquez
Ana Enríquez
8,977 Points
Ana Enríquez
Ana Enríquez
8,977 Points

Responding to the comment:

By default, some elements are properties of style. If you dont want them to be you have to make a css restart. You can do this by using a * selector with some properties like :

  • { margin:0; padding:0; border:none; font-size:12px; font-weight:400; } this is an example, you can reset the properties that you want!

or you could add a link to a restarter of properties there are a lot of reset css templates on internet. You can learn more about the default styles in this link: http://cssreset.com/what-is-a-css-reset/

Aaron Selonke
Aaron Selonke
10,323 Points
Aaron Selonke
Aaron Selonke
10,323 Points

Thanks, and your English is excellent.

Ok, so you mentioned that it was the bottom margin of the last paragraph element. OK.

There were four <P> elements in the .wrap div above the footer. Each had a default margin of 16px above and 16px below.

Did the .wrap div 'expand' 32px for each of those <p> elements??? (it doesn't look like it) How did you know specifically that the last <p> element's bottom margin was the offending behavior??

Thanks

M W
M W
3,446 Points
M W
M W
3,446 Points

Good link Ana. Well done for finding the issue....it wasn't obvious at first looking. :thumbsup:

Ana Enríquez
Ana Enríquez
8,977 Points
Ana Enríquez
Ana Enríquez
8,977 Points

I wrote all your code in codepen so I could have an easy preview of your code, then, like Mat Ward said, I use developer tools in firefox and inspect first the wrapper and the the footer. I cant seem to find something in the gap so I started going element by element inside the wrapper, If you do this path, when you reah the last p you can see that the margin is overflowing trough the wrapper and its causing the gap.

Here you can see a pic: http://uploadpie.com/FgKqe

Joe Ainsworth
Joe Ainsworth
13,588 Points
Joe Ainsworth
Joe Ainsworth
13,588 Points

This is because the last paragraph has a bottom margin of 1em which is a default style set by some browsers.

The best way to overcome this is with some simple maths. Change .wrap to the below to account for this padding.

.wrap { min-height: calc(100vh - (89px + 1em)); /* 100% of the viewport height */ }