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:
I know how I'd get what I want if I were using the "broken" or "border-box" box model:
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:
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
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With