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 Alan Boba
Alan Boba
32 Points

sticky footer no matter the content height?

Okay, I've gotten the sticky footer to work when the content is less than the viewport height.

What I haven't been able to find out is how to make header and footer fixed and only content scrolls when content is greater than 100% of the viewport height.

I'd like to do this using only css and flexbox.

Can anyone provide some guidance or point to a working example with the html and css available for inspection?

2 Answers

Steven Parker
Steven Parker
243,186 Points
Steven Parker
Steven Parker
243,186 Points

Fixed positioning is an easy way to make things "sticky".

You didn't show your code or mention what technique you were already using, but one easy way to "stick" elements on the screen is with fixed positions. One caution though, items positioned this way do not contribute to the normal text flow, so other elements can slip behind them. I have included a "spacer" element in the example as just one of many ways to prevent the paragraph text from being obscured by the header:

content.html 
<header>This is the header.</header>
<div class="spacer"></div>
<p>Here is something in between.</p>
<footer>This is the footer.</footer>
style.css 
header {
  position: fixed;
  top: 0px;
  background: green;
  padding: 5px 10px;
}

.spacer { min-height: 30px; }

footer {
  position: fixed;
  bottom: 0px;
  background: red;
  padding: 5px 10px;
}
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You would also have to do the spacer div right before the footer.

You can give the body element top and bottom padding to account for the heights of the header and footer so that you don't have to put elements in your html for stylistic reasons.

Alan Boba
Alan Boba
32 Points

Thank you Steven. Was at wits end when I finally came across this site and watched a few of the videos. Got me closer to my solution and seemed a great place to post a question.

Sorry for not posting code. Totally new to this and everything is pretty much spaghetti and I wasn't sure what would be relevant to post.

Kept on digging after posting and came up with something that is working where I've tried it regardless whether content is less than, more than, or just fills the viewport,

My best at reducing the code is below. What I think makes it work, no spacer(s) needed, is that body is specified display: flex and flex-direction: column with header and footer both using the sticky attribute.

<body>
    <header>some content</header>
    <div class="main">
        <nav>a link menu</nav>
        <div class="content">primary content</div>
    </div>
    <footer>the stuff at the bottom of the page</footer>
</body>

html, body { 
    margin: 0; 
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main {
    display: flex;
    flex: 1;
}

header,
footer {
    display: flex;
    position: sticky;
}

header {
    top: 0px;
}

footer {
    bottom: 0px;
}

.content {
    flex-grow: 1;
}
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

position: sticky isn't an official property yet and the support is too low to be used in production.

http://caniuse.com/#feat=css-sticky

Alan Boba
Alan Boba
32 Points
Alan Boba
Alan Boba
32 Points

Jason Anello, thanks for the caution. Caniuse indicates decent support for my target browser. It isn't good for a host of others but I need to overlook that for now while I move on to a different problem, fixed table header, scrolling rows. Have some partial solutions. If I can't get to a full solution I'll probably put up a different post here asking again for help.