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

Posted by rossace23
rossace23
3,819 Points

Sticky Footer Problem - CSS Layout Basics

Hello Treehouse,

I am having an issue with creating a sticky footer. I am following the method in the corresponding video, by using a "wrap" div and using the calc() function with 100vh - 82px (which is the height of my footer). The math looks correct, but I am still getting roughly 18px of my footer that falls below the page, resulting in a scroll bar. My other site pages don't have this issue, but for some reason my homepage has this problem. Further, I can't find where this additional 18px space is coming from with the chrome inspector... Any help would be great, my HTML and CSS is pasted below...

<!DOCTYPE html> <html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>GETTING STARTED WITH BRACKETS</title>
    <meta name="description" content="An interactive getting started guide for Brackets.">
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="wrap">
    <div class="nav-content">
        <ul class="navbar">
            <li>Shepherd Logo</li>
            <li>Designs</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </div>
    <div class="homepanel1">
        <p class="main-header" style="text-align:center;">Shepherd Logo</p>
        <p class="main-text">I am a web designer based in Vancouver, Canada. I have a passion for web design and love to create for web and mobile devices.</p>
    </div>
    <div class="homepanel2">
    </div>
    </div>
<footer class="main-footer">
    <p>Shepherd Logo</p>
</footer>
</body>

</html>

@media (min-width: 769px) {

.wrap {
    min-height: calc(100vh - 82px);
    /* 100vh means that the min-height will be 100% of the viewport height: 1vh = 1% of viewport height - here 82px is the footer height, so we use calc function to subtract footer height from the viewport height to make sure the footer shows up on the page without a scroll bar */
}

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

}

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

The problem doesn't seem to occur with just this bit of code. You may need to provide main.css (and maybe also normalize.css).

Even better, make a snapshot of your workspace and post the link to it here.

4 Answers

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

It looks like you have two issues: there's space around the edges from body margins, and since the "homepanel2" div has no dimensions, there's a collapsed margin from the last paragraph of "homepanel1" extending past the "wrap".

This should fix it:

  /* eliminate space from edges */
  body {
    margin: 0;
  }

  /* eliminate protruding margin from last paragraph of div */
  .wrap > div > p:last-child {
    margin-bottom: 0;
  }
Aaron Goodrum
Aaron Goodrum
9,660 Points
Aaron Goodrum
Aaron Goodrum
9,660 Points

you can do a flexbox on your body of content then offset your footer

    @media (min-width: 769px) {

      body {
        display: flex;
        flex-direction: column;
        min-height: 96vh;
        /*off set the vh units for the footer height*/
      }

        /*content of body inside a flex*/
      .main-body {
        flex: 1;
      }

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

would need to add a other div? under the <body> tag

<body>
<div class="main-body"> 
......
content
.....
</div>
<footer class="main-footer">
rossace23
rossace23
3,819 Points
rossace23
rossace23
3,819 Points

Hi Steven, here is my css - I have been coding using "Brackets" rather than workspace for this one...

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

/* Universal element with box-sizing allows easily readable code - when width is set, the content will actually become that width, and padding and borders will be automatically subtracted so that the content still fits the exact specified width */

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/* ===========================
    Fonts 
============================== */

.main-header {
    font-family: arial;
    font-size: 25px;
}

.main-text {
    font-family: arial;
    font-size: 18px;
}


/* ===========================
    Navbar
============================== */

.navbar {
    text-align: center;
    background: black;
    padding: 1em 0;
    margin: 0;
}

.navbar li {
    width: 50%;
    height: 4em;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.main-logo {
}

.nav {
}

/* ===========================
    Homepage
============================== */

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

.homepanel1 .main-header {
    text-align: center;
}


/* ===========================
    Footer
============================== */

footer {
    text-align: center;
    background: black;
    padding: 1em 0;
    margin: 0;
    color: white;
}


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

@media (min-width: 769px) {

    .wrap {
        min-height: calc(100vh - 82px);
        /* 100vh means that the min-height will be 100% of the viewport height: 1vh = 1% of viewport height - here 82px is the footer height, so we use calc function to subtract footer height from the viewport height to make sure the footer shows up on the page without a scroll bar */
    }

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

    .navbar li {
        display: inline-block;
        width: 20%;
        margin: 0 auto;
        text-align: center;
        color: #fff;
}
}
rossace23
rossace23
3,819 Points
rossace23
rossace23
3,819 Points

Hi Steven, thank you that makes sense. I also fixed the problem by giving my .homepanel1 a height of 100%, which seems to work ok.

Just curious, whenever I create a new div in my html code, should I also be setting a height in css for each of the divs? It is interesting that my other pages do not encounter this issue with the sticky footer, as can be seen in the below code. I guess I am wondering why the issue only happened on the home page - perhaps it is because it is the only page so far that I have added text content, thus the collapsed margin that extended past the .wrap.

<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="normalize.css">
        <link rel="stylesheet" href="main.css">
    </head>

    <body>
        <div class="wrap">
        <div class="nav-content">
            <ul class="navbar">
                <li>Shepherd Logo</li>
                <li>Designs</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </div>

        <div class="aboutpanel1">
        </div>

        <div class="aboutpanel2">
        </div>
        </div>    

    <footer class="main-footer">
        <p>Shepherd Logo</p>
    </footer>

    </body>
</html>
Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

It was the paragraph margin protruding, so this would not happen on other pages where the last item was not a paragraph.

Glad I could help. Happy coding!