Question

I have a header div and footer div. The header div never moves; however, the footer div must stay at the bottom of the window regardless of the screen size, i.e., a “sticky footer.” In between these two divs is a dynamically populated content div.

1. The bottom of the content div sits directly atop the footer div, and it must move up and down with the footer div (when the screen size vertically expands and contracts.) It too can be considered “sticky.”

2. However, if there is enough content, the content div must expand vertically (the bottom of the content div still remaining directly atop the footer div) to accommodate as much of the content as possible. This will happen until the top of the content div runs into the header div…

3. Then, if there is too much content to display between the header and footer divs, the content div will become scrollable, with the height of the content div contracting so as to never overlap with the header div or overlap with the footer div.

4. And again, the content div can never overlap the header div or the footer div. If there is not enough room between the two divs to display all the content in one view, the content div must become scrollable overflow-y: scroll;.

This explains my (fruitless) attempts so far:
I have yet to successfully accomplish any of this. What I do have is minimal, and, essentially useless. Some of my problems I have are: If I make the footer div position: absolute; bottom: 0px; It will be a “sticky footer” and remain on the bottom of my screen regardless of vertical screen size. However, with this absolute positioning, the content div will happily overlap with the footer. I tried to prevent this by making the content div position: absolute; bottom: 180px;. The 180px is the height of my footer div. This works…a little. It rapidly becomes a problem when content needs to be dynamically added. The top of the content div will quickly overlap with the header div… So then I set a fixed height for the content div, and enable scrolling when it exceeds that height, but that does not take into account a screen larger than my own where there may be more room to display content.

Ultimately, none of this works the way I need it to.
What is the best way to accomplish this using CSS and/or javascript (if required)? And, is there a good starting point to get me on the right track that you may know of?

Thank you for your help!

Answer 1

I don’t think this is possible in CSS without flexbox. If you’re lucky enough to only have to support browsers that support flexbox (or if you can fall back to the standard layout in older browsers), you can try this:

HTML:

<header></header>

<div class="content">
    <div class="container"></div>
</div>

<footer></footer>

CSS:

header, footer {
    position: fixed;
    left: 0; right: 0;
    height: 100px;
}

header { top: 0 }
footer { bottom: 0 }

.content {
    position: fixed;
    top: 100px; bottom: 100px;
    left: 0; right: 0;
    overflow-y: scroll;

    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    display: flex;

    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    -o-align-items: flex-end;
    align-items: flex-end;
}

Here’s the fiddle: http://jsfiddle.net/qhKa9/

---

If you have no problem relying on JavaScript, there might be a different solution with far deeper browser support. Here’s a shot at that.

CSS:

header, footer {
    position: fixed;
    left: 0; right: 0;
    height: 100px;
}

header { top: 0 }
footer { bottom: 0 }

.content {
    position: fixed;
    top: 100px; bottom: 100px;
    left: 0; right: 0;
    overflow-y: scroll;
}

.container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

JavaScript (uses jQuery):

var $content = $('.content'),
    $container = $('.container'),
    containerHeight = $container.outerHeight();

$(window).resize(function () {
    $container.css({
        position: $content.innerHeight() > containerHeight ? 'absolute' : 'static'
    });
}).resize();

Here’s the fiddle: http://jsfiddle.net/N672c/

P.S. You should probably throttle that resize event listener, but that’s a discussion for another day.