我的元素只是一个 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 有一些简单的解决方案,但我不熟悉该属性,也找不到。
最佳答案
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 备忘单;在大多数情况下,它确实比“传统”布局简单得多:
关于html - 具有自动高度的页眉和页脚的可滚动主体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35187386/