An expanding middle in CSS

Question

How would I go about designing a website which has a fixed height header and footer (attached to the top and bottom of the browser window) but an expanding middle. The scroll bars would be only for the middle (orange section in diagram) so that the rest of the page would never need to scroll. I have drawn a mock-up below to explain more clearly.

Ideally it needs to be entirely implemented in CSS and HTML (no javascript fiddles!). I've got quite far with this problem but I can't force the orange section to fill up the remaining space when it isn't full(whatever it's content) and start scrolling if it overflows.

What I want the site to look like

I wasn't sure that the sticky footer is what you wanted, which is why I posted it as a comment and with a question mark. The thing I don't understand about your question is that the "minimum height" and "maximum height" images do not seem to agree with your text "fixed height header and footer (attached to the top and bottom of the browser window) but an expanding middle". Is the outer red border in your image not the viewport, but the whole page? — thirtydot, Feb 21 '11 at 17:52
Sorry. The red border represent the entire viewport (ignore width). The footer and header stay the same height. Only the orange bit changes height (and as such has its own scrollbar) because it could have any amount of content. — Patrick Beardmore, Feb 21 '11 at 17:57
I started writing my answer before that last comment of yours. I'm encouraged now that I've got it right, here's hoping! — thirtydot, Feb 21 '11 at 18:01
The "overflow" property renders incorrectly in Dreamweaver, which is why I couldn't work this one out myself. My own less elegant solution worked eventually after I tried it out. — Patrick Beardmore, Feb 21 '11 at 20:13

score 9 · Accepted Answer · answered Feb 21 '11 at 18:00

9

I think this is what you want:

Live Demo (edit)

HTML:

<div id="header">Patrick</div>
<div id="content">..</div>
<div id="footer">Beardmore</div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden
}
#header, #content, #footer {
    position: absolute;
    left: 0;
    width: 100%
}
#header {
    top: 0;
    height: 100px;

    background: #ccc
}
#content {
    top: 100px;
    bottom: 100px;
    overflow-y: auto
}
#footer {
    bottom: 0;
    height: 100px;

    background: #ccc
}

answered Feb 21 '11 at 18:00

thirtydot

224,678
48
389
349

FYI When you run this on an Android browser you can't scroll the #content. Anyone able to test on IPhone/Ipad? – Yarin Oct 10 '11 at 03:03
Unfortunately, I don't have an Android device to test this with. Though, it would be a bit weird if it didn't support `overflow-y: auto`.. – thirtydot Oct 10 '11 at 04:10
Nice answer. If I may make a suggestion for big texts: Use Lorem Ipsum: http://es.lipsum.com/ that really hurts less to my eyes :-) – Twinone Apr 03 '13 at 14:00

Scott Weaver · Answer 2 · 2017-04-13T18:48:26.327

An old question, but flexbox has given us a super easy way to implement this pattern, a familiar variation on the 'Holy Grail' layout:

body {
  /*set container to vertical (column) flex mode, ensure body is full height*/
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
header, footer {
  /*more or less equivalent to min-height:50px*/
  flex-basis:50px
}
header {
  background-color: #7AEE2D;
}
main {
  background-color: #EBAE30;
  /*tell main section to expand to fill available space, this is same as flex 1; or flex:1 1 auto;*/
  flex-grow:1;
}
footer {
  background-color: #34A4E7;
}

<header>header</header>
<main>main</main>
<footer>footer</footer>

A note about the syntax: I've used the "atomic" flexbox CSS properties here for simplicity, but in the wild you are more likely to run into the shorthand syntax using the flex keyword by itself. The default values for the 3 properties you can set on flex items (children of a display:flex container) are:

Initial value as each of the properties of the shorthand: flex-grow: 0 flex-shrink: 1 flex-basis: auto

Using flex, there are multiple ways to compose these properties, specifying one, two, or three values, and those values can by keywords, unit lengths (2px), or unitless grow/shrink ratios 2. Many different "overloads" are available, depending on your arguments.

For example, flex-basis:50px could've been flex:50px, flex:0 1 50px, and flex-grow:1 could have been flex 1; or flex:1 1 auto;. It's still not as bad as some other CSS shorthands I can think of (position, I'm looking at you). The 'flex' shorthand syntax MDN page has more details.

score 0 · Answer 3 · answered Feb 21 '11 at 17:31

0

It's called StickyFooter or the "footer push" method. It's all over the web, but this is the best option I've found:

http://ryanfait.com/sticky-footer/

answered Feb 21 '11 at 17:31

bpeterson76

12,918
5
49
82

This isn't quite what I had in mind. The trouble with sticky footer is the the whole browser screen scrolls. I want to be able to make individual compartments scroll all on their own with their own scroll bars (like the orange compartment). It might not seem like a difference but its important for what I have in mind. – Patrick Beardmore Feb 21 '11 at 17:35
1

Certainly understandable. However, I'd caution you that usability test after usability test confirm that scrolling divs (or boxes) in a website contribute to user frustration. They're tough to navigate, content can get lost, and are a flat-out failure for accessibility. I'm undoing a set right now on a site that I inherited. Believe it or not, a better solution might be to consider "paging" content using a Grid (like Datatables) or even a server-side pagination script for your respective platform. Here's some evidence: http://www.usability.gov/pdfs/chapter8.pdf – bpeterson76 Feb 21 '11 at 19:21

An expanding middle in CSS

3 Answers3

Linked