I'm working on constructing a layout that features a header and footer with flexible heights, while the middle section takes up the remaining space. If there is overflow in the middle section, a scroll bar should appear specifically for that section.
The code I have currently works well for Safari and Chrome:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.l-fit-height {
display: table;
height: 100%;
}
.l-fit-height > * {
display: table-row;
height: 1px;
background-color: red;
}
.l-fit-height-expanded {
height: auto;
background-color: blue;
display: table-row;
}
.l-scroll-content {
height: 100%;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="l-fit-height">
<section>
Header
</section>
<section class="l-fit-height-expanded">
<div class="l-scroll-content">
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
</div>
</section>
<section>
Footer
</section>
</div>
</body>
</html>
I can't seem to understand why Firefox behaves differently. While the content in the middle expands correctly in height, it does not shrink beyond the height of its contents.
It's challenging to determine the correct behavior. Any suggestions?
Edit
A similar example setup can be found here: http://jsfiddle.net/t3mZF/
Interestingly, if .l-fit-height-row-content is changed to display: table-cell, both WebKit and Gecko display the same behavior, ignoring the overflow.
Using display: block, WebKit shows the desired behavior (scrollbar appears with the footer at the bottom of the viewport), but Firefox doesn't add the scrollbar and instead pushes the footer off the screen (scrollbar on the viewport, not the middle content).
I've also filed a report on Bugzilla