html - 具有自动高度的页眉和页脚的可滚动主体

Question

我的元素只是一个 Header，然后是 Body，然后是 Footer

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

目前 #my-element 已被限制为具有浏览器窗口的最大高度。 #header 和 #footer 具有可变高度，永远不应是可滚动元素。 #body 是唯一应该可滚动的元素，只有当所有 3 个高度的总和超过 #my-element 时才会发生滚动。当发生这种情况时，#body 是获得滚动条的元素。

出于某种原因，我怀疑 flexbox 有一些简单的解决方案，但我不熟悉该属性，也找不到。

Answer 1

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

你没有看错!

/* 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>

这是我的 flexbox 备忘单；在大多数情况下，它确实比“传统”布局简单得多:

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