具有自动高度页眉和页脚的可滚动正文答案

【问题标题】：Scrollable Body with auto-height Header and Footer具有自动高度页眉和页脚的可滚动正文
【发布时间】：2016-02-04 05:24:41
【问题描述】：

我的元素只是一个 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 有一些简单的解决方案，但我不熟悉该属性并且无法找到。

【问题讨论】：

您的问题是您使用的保留标签只能有一个 perdocument developer.mozilla.org/en-US/docs/Web/HTML/Element/body
使用 <main> 而不是 <body> 恕我直言
js 解决方案在这种情况下会非常简单。 css...嗯...
@scrappedcola：我提供的元素只是
的伪装。我只是觉得这样会更清晰一些，而我使用它的地方实际上是 React ：/
这些细节应该在问题中。如您所见，您的信息与问题不一致。

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