I’m trying to write a page where there must be a header and a footer with a body, all with unknown heights.
There must be a full scroll bar, which should shrink between the header and the footer whenever they’re visible.
I’ve written a jsfiddle to demonstrate the issue.
https://jsfiddle.net/solidshook/xej43g0c/4/
I’ve made something close to what I need with a flexbox, which looks good but isn’t quite what I want:
<div class='header'>
i am the header
</div>
<div class='body'>
<div class='sidebar'>
<div class='sidebar-top'>
top of sidebar
</div>
<div class='sidebar-bottom'>
bottom of sidebar
</div>
</div>
<div class='content'>
i am the content
</div>
</div>
<div class="footer">
i am the footer
</div>
.body {
display: flex;
}
.content {
width: 50%;
height: 1000px;
align-self: flex-start;
}
.sidebar {
width: 20%;
align-self: flex-start;
position: sticky;
top: 0;
height: 100vh;
}
.sidebar-top {
position:absolute;
top: 0;
}
.sidebar-bottom {
position: absolute;
bottom: 0;
}
.header, .footer {
width: 100%;
background-color: pink;
}
}
I would really prefer to do this entirely with CSS, but if there’s anything else to be done I’d be happy to see
Does anyone know how I could achieve this?
Thanks!