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 Flexbox Layout Building a Layout with Flexbox Creating a Sticky Footer with Flexbox

Posted by Jeff Sanders
Jeff Sanders
Courses Plus Student 9,503 Points

Not a viable solution when the sticky footer must always be visible at the bottom of the viewport.

A sticky footer by definition is a footer that sticks to the bottom of the viewport and not the bottom of content. However, when there is more content than can fit within the viewport, a sticky footer is pushed out of view. There are cases when the requirement is that the footer is visible at the bottom of the viewport at ALL times.

In the video, it appears that this a viable solution for that special case I mentioned above; however, the reason that it works is because there is limited content in the div.row. If you add more content to div.row, the footer no longer sticks to the bottom of the viewport. If you need your footer to be viewable at all times, this isn't what you'd want.

4 Answers

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

For the requirements you describe, you'd probably prefer just fixed positioning:

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}
Jeff Sanders
Jeff Sanders
Courses Plus Student 9,503 Points

Hey Steven, I figured out a way to do this while still using flexbox:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best City Guide</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/flexbox.css">
</head>
<body>
    <div class="wrapper">
      <header class="main-header">
          <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>
      </header><!--/.main-header-->   

      <div class="content">
        <div class="banner">
            <img class="logo" src="img/city-logo.svg" alt="City">
            <h1 class="headline">The Best City</h1>
            <span class="tagline">The best drinks and eats in the best city ever.</span>
        </div><!--/.banner-->

        <div class="row">       
            <div class="primary col">
                <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>
                <p>Brownie ice cream cotton candy liquorice cake. Macaroon caramels fruitcake lemon drops. Carrot cake jelly halvah biscuit. </p>
            </div><!--/.primary-->

            <div class="secondary col">
                <h2>How to get here</h2>
                <p><strong>Plane: </strong>Tiramisu caramels gummies chupa chups lollipop muffin. Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake.</p>
                <p><strong>Train: </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops. Lollipop gummi bears dessert muffin I love fruitcake toffee pie.</p>
                <p><strong>Car: </strong>Jelly cotton candy bonbon jelly-o jelly-o I love. I love sugar plum chocolate cake pie I love pastry liquorice.</p>
            </div><!--/.secondary-->
        </div>
      </div>
      <footer class="main-footer">
          <div class="footer-inner">
              <span>&copy;2015 Residents of The Best City Ever.</span>
          </div>
      </footer>
    </div>
</body>
</html>

CSS

/* ================================= 
  Base Styles
==================================== */
html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.content {
    flex: 1;
    overflow: auto;
}

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

@media (min-width: 769px) {

    .main-header,
    .main-nav {
        display: flex;
    }
    .main-header {
        flex-direction: column;
        align-items: center;
    }

}

@media (min-width: 1025px) {

    .main-header {
        flex-direction: row;
        justify-content: space-between;
    }

}
Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

I think that's what they were after in the course. The advantage over the simpler fixed position is that the scrollable part doesn't pass under the footer.

Jeff Sanders
PLUS
Jeff Sanders
Courses Plus Student 9,503 Points
Jeff Sanders
Jeff Sanders
Courses Plus Student 9,503 Points

Yes, indeed. However, there are cases when content needs to pass under a footer. For example, if an app uses the footer as a bar that both indicates that a user is in edit mode (editing some data that is otherwise in Readonly mode) and contains buttons such as "Exit" and "Save", then in that case the footer needs to be visible at all times and content would need to pass under said footer.

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

Either way, the footer is always visible. But with the simple approach the scroll area includes where the footer is, and with the flexbox method the scroll area is above, but not including, the footer.

Jeff Sanders
PLUS
Jeff Sanders
Courses Plus Student 9,503 Points
Jeff Sanders
Jeff Sanders
Courses Plus Student 9,503 Points

"Either way, the footer is alway visible"

Incorrect, in Guil's example, the footer is visible unless the main content exceeds the height of the viewport height. In that case, the footer is not always visible. A user would have to scroll until the end of the content to see the footer. The footer would only stick to the bottom of the viewport if the content was less than the combined remaining height of the the footer and empty space. Guil's solution works fine if you don't need to see the footer when the main content exceeds the height of the viewport. It does not suffice in my requirement that I explained above.

To test this, paste more content into div.row.

"But with the simple approach the scroll area includes where the footer is, and with the flexbox method the scroll area is above, but not including, the footer."

Not sure what you mean by "simple" approach. I assume you are referring to Guil's solution. In Guil's solution, all child elements of the body (header, banner, .row content, and footer) are scrollable, yes. That is not what is required in my example that I explained above. In the example I explained, the footer must ALWAYS be visible and main content must scroll below it. In my posted solution, I also use the flexbox method, but the scrollable area is only the banner and .row content to meet my requirement. The flexbox method alone does not require that the scrollable content must include all body content, including the footer.

Depending on the requirement, neither Guil's nor my solution is wrong. Our solutions meet different requirements. My argument is not that Guil is wrong, but that it doesn't meet the requirement I proposed.

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

When I said "either way", I was comparing the simple "fixed" method I suggested with yours which creates a scroll area above (and not including) the footer. These two methods meet the requirement of keeping the footer visible at all times.

I refer to my suggestion as "simple" because it uses only fixed positioning and does not require flexbox.

Jeff Sanders
PLUS
Jeff Sanders
Courses Plus Student 9,503 Points
Jeff Sanders
Jeff Sanders
Courses Plus Student 9,503 Points

Gotcha. Did you try yours? What was your solution for making the content scrollable? The first thing I noticed missing was a z-index so I added a z-index of 1000. However, additional main content remains hidden under the footer. I also added bottom padding that equaled the height of the footer, but sill couldn't scroll to see all of the main content.

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

Either bottom padding or margin (on the main area) should make it possible to display all the main content by scrolling when there is a fixed footer.

Setting z-index should not be necessary if the footer is the last thing in the body.