Question

我的元素只是一个标题，然后是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

出于某种原因，我怀疑使用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/

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

1 个答案: