Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Mobile-First CSS Layout

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Creating a Sticky Footer

5:07 with Guil Hernandez

In web design, a sticky footer is a footer that sticks to the bottom of the page regardless of the amount of content on the page.

If you still see a gap below the footer in browsers like Firefox and IE, or when you change the browser's zoom, give .main-footer a height or min-height value of 89px.

Resources

Video review

If a page’s content is shorter than the height of the browser, the page may display a big, undesirable gap between the bottom of the viewport and the footer. In the markup, add a new <div> that wraps the header and main container elements.

<div class="wrap">
  <div class="main-header">
    <div class="container">
      ...
    </div>
  </div>

  <div class="container">
    ... 
  </div>
</div> <!-- /.wrap -->

Use calc() to write a mathematical expression that will subtract the footer height from the viewport's total height.

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

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    In this video, I'll show you how to create a sticky footer in your layout. 0:00
    In web design, a sticky footer is a footer that sticks to the bottom of the page 0:04
    regardless of the amount of content on the page. 0:09
    Usually, if a page's content is shorter than the height of the browser, 0:13
    you end up with a footer that sits in the middle of the page instead of at 0:17
    the bottom where it belongs. 0:20
    Because of that, you sometimes get a big undesirable gap between the bottom of 0:22
    the viewport and the footer. 0:27
    This is a common problem you may come across when building a layout. 0:29
    Now there are different methods for creating sticky footers with CSS. 0:33
    In this video, I'm going to cover a popular method that uses the CSS calc function and 0:37
    the viewport relative VH unit. 0:42
    It's also a method that requires the least amount of CSS. 0:45
    First in the HTML file, 0:48
    I'm going to add a new div that wraps the main header and container div. 0:50
    Now, this is another one of those instances where it's helpful to use 0:57
    a wrapper div in your layout. 1:00
    So right above the opening header tag I'll add a div element and 1:03
    give it the class wrap. 1:07
    Then I'll add the closing div tag for 1:10
    this wrap div right above the opening footer tag. 1:13
    So notice how I'm not including the footer inside the new wrap div. 1:23
    I'm going to use the new wrapper to enforce 1:28
    the footer to stick to the bottom of the page with a little CSS. 1:31
    So inside the media query in my stylesheet, 1:36
    I'm going to create a new CSS rule that targets the class wrap. 1:39
    To force the footer to the bottom of the page I'm going to use the 1:46
    min-height property. 1:50
    Min-height sets the minimum height an element can be, so 1:51
    I'm going to give it a minimum height of 100vh. 1:56
    Vh is a viewport relative unit, it stands for viewport height because 2:01
    it allows sizing purely based on the height of the browser viewport. 2:06
    Now one vh is equal to one-one hundredth or 1% of the height of the viewport. 2:12
    So the value 100vh means that the 2:18
    min-height will be 100% of the viewport height. 2:22
    So when I save my stylesheet and refresh the browser, we can see that it works, 2:26
    but it's pushing the footer down a little too far below the viewport, 2:32
    and I'm getting a vertical scroll bar. 2:37
    So if the page's content is shorter than the height of the browser, I want to stick 2:42
    the footer to the bottom of the viewport without seeing the scroll bar. 2:46
    The height of the footer is what's making the page scroll. 2:51
    Since I'm expanding the wrapper to the full height of the viewport, 2:56
    it's pushing the footer below the viewport area. 3:00
    So to fix this, if I open the Chrome Developer Tools and inspect the main 3:04
    footer element, I can see that the footer's total height is 89 pixels. 3:09
    Now instead of trying to calculate a value equivalent to 100vh minus 89 pixels, 3:14
    I'm going to use the CSS calc function to handle this tricky math for me. 3:21
    Calc is a CSS function that performs calculations and returns a result. 3:27
    With calc you write simple mathematical expressions that add, subtract, 3:33
    multiply, and divide values. 3:38
    So back in my wrap rule, 3:40
    I'm going to replace the main height value of 100vh with calc. 3:42
    So I'm going to type calc followed by a set of parentheses. 3:47
    Now inside the parentheses I'm going to use a subtraction operator to write 3:51
    a mathematical expression that will subtract 89 pixels from 100vh. 3:56
    So I'm going to type 100vh minus 89 pixels. 4:01
    So the result of this calc expression is going to be used as the value for 4:08
    min-height. 4:13
    So again, this is calculating 100% of the viewport height minus the footer height. 4:14
    So let's take a look at this in the browser. 4:21
    I'll save my stylesheet and when I refresh the browser we can see that it worked, 4:23
    the scroll bar is now gone. 4:28
    So now the footer will always stick to the bottom of the page no matter how 4:30
    little content there is on the page. 4:34
    This method works great if your footer has a fixed height. 4:41
    In later courses you'll learn how to create a flexible sticky footer using more 4:45
    advanced CSS layout properties. 4:49
    You can also learn a whole lot more about the calc function and 4:51
    viewport relative units in the Teacher's Notes of this video. 4:54
    You've learned a lot of useful CSS layout tips and 4:58
    methods in this section of the course. 5:00
    I hope you're starting to get some ideas on how you can use some of these in 5:02
    your projects. 5:05

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up