How can I create a grid layout where the aside is sticky to top: 0 and fills all remaining height (e.g. 100% of height), but when scrolling down, the aside height should be changed to 100% minus the footer's height? Is it possible to achieve this without using JavaScript?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-areas: "aside content"
"footer footer";
grid-template-columns: 20rem 1fr;
}
aside {
grid-area: aside;
background-color: red;
}
nav {
font-size: 2rem;
color: black;
position: sticky;
top: 0;
height: 100%;
background-color: yellow;
}
main {
grid-area: content;
background-color: green;
height: 150vh;
}
footer {
grid-area: footer;
background-color: blue;
height: 10rem;
}
ul {
list-style: none;
}<div class="grid">
<aside>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav></aside>
<main>Content</main>
<footer>Footer</footer>
</div>