Header/Content/Footer layout with scrollable content and footer pinned to viewport bottom

Question

There are lots of quasi-duplicates to this question, I know: webpage template where content takes full height of viewport if has 1 line minus footer is one, but that's not what I want; there's this hilarious question: How to create an HTML CSS Page with Header, Footer and Content that mostly describes what I want, I think, but unfortunately it's somewhat incoherent and there's not really an answer. I've found lots of help doing things I could probably figure out for myself, and which I don't want:

• Fixed header, footer fixed at bottom for short content but pushed down off page when content is longer (like this oft-repeated setup here: http://boagworld.com/technology/fixed-footers-without-javascript )
• Fixed header, content, and footer, where footer isn't pinned to the viewport bottom
• Fixed header and footer where content scrolls "behind" the header and footer - this one is cute and I've used it but it's not what I want at the moment

I know how I'd get what I want if I were using the "broken" or "border-box" box model:

1. Put a 100% height container wherever I wanted it horizontally on the page, with "position: relative" to make dealing with the contents a little easier
2. In the container, put three absolutely-positioned divs: the header, which gets stuck to the top (with a fixed height); the footer, stuck to the bottom (also fixed height); and the content, with height 100% but with padding at top and bottom to account for the header and footer.

In the "broken" box model, giving the content box 100% height worked great, because the height included the top and bottom padding. This even worked great in IE6 quirks mode, and for Firefox I'd have just used "-moz-box-sizing: border-box;" to make it work the same way.

But here we are, living in the future, with moon colonies and frozen breakfast pizzas, so I try not to reminisce much about the "border-box" days. The hardest thing for me to "get" with this layout technique is how to do the scrolling content. The only approach that I can think of is a hackish variation on the above:

1. Again, start with a 100% height container, "position: relative"
2. Again, absolutely-positioned header and footer, with fixed heights.
3. For the content, I'd absolutely drop in a div with no specific height, but with "top" and "bottom" set according to the header and footer heights.

That technique won't really work in IE6; well, in fact it won't work at all, because IE6 does not derive height from the implication of setting both "top" and "bottom". I could use that "active" stuff in the CSS that IE supports to effectively compute the height with Javascript, but I consider that to be pretty disgusting.

I've been through a lot of descriptions of very similar layout problems on the web, but the key thing that I have yet to find is a good technique for getting that middle content box to scroll. I have a feeling that it might be possible to use a content box with top- and bottom-margin set to account for the header and footer, but I don't know how to constrain its height so that the scroll bar would kick in at the right point (when the actual contents overflow the space between the bottom of the header and the top of the footer).

Ideas? Links to treasure-troves of templates? (Btw Matthew James Taylor's domain seems to be gone at the moment, creating a great disturbance in the Force.) I'm pretty much out of ideas.

update Here is a sample of what I want: http://gutfullofbeer.net/dreamlayout.html

That example page should work in Firefox and Chrome and I think Safari, and it half-works in IE8 (only half because of course we couldn't have expected Microsoft to get "-ms-border-box" to work properly).

Also I'm adding the "javascript" tag in case some genius can give me an IE hack that's not too revolting.

another update Here's the "compromise" layout, where the central content scrolls "under" the header and footer, with the scroll bar being supplied by an outer container. It actually looks kind-of cute, depending on your tastes, and it works in IE6 and I think everywhere else (though I haven't tried Opera). Ignore the colors of course; they're just there as diagnostic aids.

http://gutfullofbeer.net/compromiselayout.html

Answer 1

Maybe this will help you: (you need jQuery)

$(function () {
	$("#toggle-content").click(function() {
        $(".more-content").toggleClass("less-content");
	});
});

body {
  height: 100%;
  margin: 0 auto;
  width: 50%;
}

.fixed-top {
  width: 100%;
  height: 20vh;
  background: #faa;
}

.wrapper {
  positon: static;
  height: 100%;
  width: 100%;
}

.content {
  position: relative;
  width: 100%;
  height: 20vh;
  background: #ffa;
}

.fixed-bot {
  position: fixed;
  width: 50%;
  height: 20vh;
  background: #faa;
  opacity: .5;
  bottom: 0;
}

.more-content {
  /* display: block; */
  overflow-y: scroll;
  transition: all 0.3s ease;
  height: 40vh;
  
}

.less-content {
  height: 0;
}

/*
other styles
*/

h1,h2 {
  margin-bottom: 0;
  margin-top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="fixed-top"><h1>THIS IS HEADER CONTENT</h1>
   <button id="toggle-content" type="button">MORE/LESS</button>
</header>
<section class="wrapper">
  <section class="content"><h2>CONTENT</h2>, Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui.
  </section>
  <section class="more-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis, dolor quis pharetra bibendum, purus est porta purus, eu elementum orci tortor eu metus. Pellentesque et neque id metus tincidunt maximus. Mauris ac enim iaculis, interdum tellus a, congue arcu. Proin id justo ut nisi pharetra suscipit fermentum et tortor. Nullam felis libero, sodales a lacus vel, molestie feugiat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lorem diam, tincidunt sit amet ex quis, ullamcorper euismod urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in tristique lorem, quis placerat diam. Nullam eleifend odio at dui cursus faucibus. Quisque ac nisi porttitor, molestie est non, facilisis dui. Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. Suspendisse a dignissim dolor, quis efficitur libero. Fusce enim sem, consequat nec rhoncus eu, euismod ac velit.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis, dolor quis pharetra bibendum, purus est porta purus, eu elementum orci tortor eu metus. Pellentesque et neque id metus tincidunt maximus. Mauris ac enim iaculis, interdum tellus a, congue arcu. Proin id justo ut nisi pharetra suscipit fermentum et tortor. Nullam felis libero, sodales a lacus vel, molestie feugiat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lorem diam, tincidunt sit amet ex quis, ullamcorper euismod urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in tristique lorem, quis placerat diam. Nullam eleifend odio at dui cursus faucibus. Quisque ac nisi porttitor, molestie est non, facilisis dui. Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. Suspendisse a dignissim dolor, quis efficitur libero. Fusce enim sem, consequat nec rhoncus eu, euismod ac velit.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis, dolor quis pharetra bibendum, purus est porta purus, eu elementum orci tortor eu metus. Pellentesque et neque id metus tincidunt maximus. Mauris ac enim iaculis, interdum tellus a, congue arcu. Proin id justo ut nisi pharetra suscipit fermentum et tortor. Nullam felis libero, sodales a lacus vel, molestie feugiat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lorem diam, tincidunt sit amet ex quis, ullamcorper euismod urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in tristique lorem, quis placerat diam. Nullam eleifend odio at dui cursus faucibus. Quisque ac nisi porttitor, molestie est non, facilisis dui. Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. Suspendisse a dignissim dolor, quis efficitur libero. Fusce enim sem, consequat nec rhoncus eu, euismod ac velit.</p>
</section>
<footer class="fixed-bot">
</footer>
</section>