CODEWITHSUNDEEP
htmlcssflexbox
user1778856
user1778856

Reputation: 641

Scrollable Body with auto-height Header and Footer

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.

Upvotes: 0

Views: 174

Answers (1)

Daniel Beck
Daniel Beck

Reputation: 21485

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/

Upvotes: 3

Related Questions