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 Mike West
Mike West
9,163 Points

Hello Everyone. I'm having a little difficulty with sticky footers and need some help

After watching Guil's video, I was having difficulty making a sticky footer in a practice site I'm working on. I got through setting the VH to 100 in my media query; all functions went according to plan. I then used google dev tools to inspect my footer height which is the same as Guil's site in the vid; 89px. However, when I used the 89px value in the calc rule it did not balance out my footer height and I had a scroll bar, albeit a smaller one. I eventually got the right min-height by adding 24px, but I'm confused as to what caused this. Any direction or help?

Mike West
Mike West
9,163 Points

I can provide code if it's any help or screen shots

Mike West
Mike West
9,163 Points

here is a link to the video:

https://teamtreehouse.com/library/css-layout-basics/getting-started-with-css-layout/creating-a-sticky-footer

@media (min-width: 769px) {

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

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



.col {
display:inline-block;
width: 30%;
vertical-align: top;
margin-right: -4px;
padding-right: 1em;
padding-left: 1em;
}

.name,
.main-nav,
.main-nav li {
    display: inline-block;
    margin-right: -4px;
 }

.name {
    margin-right: 400px;

}

.main-nav li {
    padding-right: 12px;
}

}

2 Answers

Chris Hall
seal-mask
.a{fill-rule:evenodd;}techdegree
Chris Hall
Full Stack JavaScript Techdegree Student 11,442 Points
Chris Hall
.a{fill-rule:evenodd;}techdegree
Chris Hall
Full Stack JavaScript Techdegree Student 11,442 Points

So I'm honestly not sure why it's doing that for you, but I have a few guesses. Initially when I followed along with the video I had issues because I left the closed .wrap div tag that workspaces puts in automatically while closing it above the footer. Check your HTML to see if the same thing happened to you. The second issue was I forgot to close the min-height declaration properly, including closing calc. lol It happens.

Now if everything is how it should be and you're still getting bars I'm going to guess it has to do with how big your viewport is or how your browser is interrupting everything. Let's start with the latter and see if your browser just doesn't like how the media query was set.

Change this..

@media (min-width: 769px) {
     /* Content */
}

to this...

@media screen and (min-width: 769px) {
      /* Content */
}

By doing this we're targeting only screens, and rarely, yet sometimes, the browser wants to see that. I doubt that's what's going on here, but it doesn't hurt to check.

Now to the former! When you are watching videos, and working in workspaces do you have the windows side by side? If so your width when previewing the page might be under the 769px break-point. If that's the case the media query wont function. To check this open up developer tools (Ctrl+Shift+I in Chrome) and select the .wrap div then open the computed tab to the right and you'll be able to see the height and width of the element. Alternatively you could place your mouse over the .wrap div and in the top left corner of the screen you'll see the same.

Now remember the width and height of your page content is fluid, so as your browser window looses width the content in .wrap div will grow vertically. On my screen when the window is maximized the height of .wrap is 433.813px, but when I have the browser at the width I typically watch Treehouse videos at that height is 508.813px. So that leaves less space between the end of .wrap and the start of the footer. With my window at the video watching width when I bring the bottom up to make the window smaller the footer does indeed stick until the footer hits the .wrap div. Once this happens a scroll bar will come up as the total height of all elements on the page is now greater than the window.

Anyway, those where my guesses and explanations to what might be going on for you. Below you can find my code for that video. I hope this all helps!!

CSS

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

* {
  box-sizing: border-box;
}

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

p:last-child {
    margin-bottom: 0;
}

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

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

/* ---- Navigation ---- */

.name {
  margin: 0;
}

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

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

.main-header {
    padding: 1.5em 0;
    background: #3acec2;
}

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

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

@media (min-width: 769px) {

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

    .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> <!-- Ends .wrap -->
    <footer class="main-footer">
        <span>&copy;2015 Residents of The Best City Ever.</span>
    </footer>
</body>
</html>
Mike West
Mike West
9,163 Points
Mike West
Mike West
9,163 Points

Thanks for the great answer Chris!