Scrollable Body with auto-height Header and Footer

Question

My element is simply a Header, then Body, then Footer

<div id="my-element">
  <div id="header">...</div>
  <div id="body">
    ...
  </div>
  <div id="footer">...</div>
</div>

Currently #my-element has been confined to have a max-height of the browser window. #header and #footer have variable heights and should never be scrollable elements. #body is the only element that should be scrollable, and that occurs only when the sum of all 3 heights' exceed that of #my-element. When that occurs, #body is the element that gains a scrollbar.

For some reason I suspect that there is some straightforward solution with flexbox, but I'm not familiar with that property and have not been able to find one.

Your problem is that you are using a reserved tag that can only have one perdocument https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body — scrappedcola, Feb 03 '16 at 20:52
js solution would be pretty simple in this case. css... hmmm ... — Ji_in_coding, Feb 03 '16 at 20:54
@scrappedcola: The elements I provided are just
s in disguise. I just thought it would be a bit clearer like this, and the place I'm using it is actually React :/ — user1778856, Feb 03 '16 at 20:57
Those details should be in the question. As presented your information is inconsistent with the problem. — scrappedcola, Feb 03 '16 at 20:59

Daniel Beck · Accepted Answer · 2016-02-03T21:23:33.767

For some reason I suspect that there is some straightforward solution with flexbox

You're not wrong!

/* The important bits: */
body {margin:0}
#my-element {
  display: flex;
  flex-direction: column;
  max-height: 100vh
}
#header, #footer {flex-shrink: 0}
#body { overflow-y: scroll }

/* The so-you-can-see-what-it's-doing bits: */
#header,
#body,
#footer {
  border: 1px solid
}

<div id="my-element">
  <div id="header">HEADER<br>HEADER</div>
  <div id="body">
   BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>
   BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>
   BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>BODY<br>
  </div>
  <div id="footer">FOOTER</div>
</div>

This is my go-to cheatsheet for flexbox; it's really quite a lot simpler than "traditional" layouts in most cases:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

@user1778856, for IE, here's some guidance: http://stackoverflow.com/a/35137869/3597276 — Michael Benjamin, Feb 04 '16 at 03:34
I can't disagree even a little bit with that sentiment (and that's a good writeup of the major problem points, @Michael_B) At this point I treat older IE as the "degrades gracefully" target, but I know that's not an option for all projects. — Daniel Beck, Feb 04 '16 at 13:15

Scrollable Body with auto-height Header and Footer

1 Answers1