CSS布局:固定内容中的页眉/页脚和子页眉

Question

我正在开发一个web应用程序，希望具有以下布局：

<div class="wrapper">
--header--
<div class="header">
</div>
--body--
<div class="content">
--header within body--
<div class="sub-header">
</div>
---scrollable content-
<div class="scrollable-content">
</div> 
</div>
--footer--
<div class="footer">
</div>
</div>
--css---
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
flex: 0 0 auto;
}
.content {
overflow-y:scroll;
flex: 0 1 auto;
}

我想将剩余的滚动高度分配给"；可滚动内容"；div.我遇到过整个内容都可以滚动的答案，但这里的情况并非如此。

任何帮助都会很棒。

谢谢。

Answer 1

这里我使用了简写css属性flex来确定每个<div>的高度并设置overflow: scroll;。因此，其他元素不会在该元素溢出时滚动。

.wrapper {
border: 1px red solid;
height: 300px;
display: flex;
flex-direction: column;
flex-wrap: no-wrap;
}
.header {
border: 1px red solid;
flex: 0.2;
}
.content {
border: 1px red solid;
flex: 0.6;
display: flex;
flex-direction: column;
flex-wrap: no-wrap;
}
.sub-header {
border: 1px red solid;
flex: 0.15;
}
.scrollable-content {
border: 1px red solid;
flex: 0.85;
overflow: scroll;
}
.footer {
border: 1px red solid;
flex: 0.2;
}

<div class="wrapper">
<div class="header">
--header--
</div>
<div class="content">
<div class="sub-header">
--header within body--
</div>
<div class="scrollable-content">
---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br>      ---scrollable content--<br>
</div>
</div>
<div class="footer">
--footer--
</div>
</div>