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

yoav green
yoav green
8,611 Points
Posted by yoav green
yoav green
8,611 Points

im still getting the scroll bar

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

* {
  box-sizing:border-box; 
}
body {
    line-height: 1.6;
    color: #3a3a3a;
}

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);   /* 100vh;*/ /*view port relative unit height */ 
    }
   .container {
   width: 70%;
   max-width: 1000px;
   margin: 0 auto
}

}

why am i still getting the scroll bar? wrote the exact math calculation in the video

yoav green
yoav green
8,611 Points
yoav green
yoav green
8,611 Points

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>

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

3 Answers

Luke Kennedy
Luke Kennedy
11,661 Points
Luke Kennedy
Luke Kennedy
11,661 Points

Hi Yoav Green,

I had the same problem as yours. It's actually due to the margin of the last paragraph tag. If you were like me then you didn't start a new workspace. haha. So there is actually a difference in the code though that Guil did in the "Base Element Styles" section from the previous video.

You are missing the (in the "Base Element Styles" section) is the p: last-child { margin-bottom: 0; }

That should do the trick to remove the scroll bar. Hope that helps.

Luke.

Joshua Furmanczyk
Joshua Furmanczyk
4,299 Points

Thanks! This also helped me out too. I noticed in dev tools there was a gap between that last paragraph and my footer...but wasn't quite sure how to fix it.

p:last-child makes sense.

yoav green
yoav green
8,611 Points
yoav green
yoav green
8,611 Points

ive done that, but im now happy from the fact that the devtool indicated 89px for the footer, and still the calc did not stick it without the scroll bar :/

Wilbon Robinson
Wilbon Robinson
14,688 Points
Wilbon Robinson
Wilbon Robinson
14,688 Points

Try adjusting the section of your media query that says "min-height: calc(100vh - 89px)" but make 89px the actual height of your footer in your project or just adjust that number up or down till the scroll bar goes away. Hope this helps.

----Will R

.wrap { min-height: calc(100vh - 89px); /*change 89 px to your footer height to get rid of the scroll bar */ }