I am working on a web application and want to have the following layout:
<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;
}
I want to assign the remaining height with scroll to the "scrollable-content" div. I have come across answers where the entire content is scrollable, but that's not the case here.
Any help would be great
Here I have used shorthand css property flex
to determine height of each <div>
and set the overflow: scroll;
. Hence other elements doesn't scroll on overflow of that element.
.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>