Looking to create a fixed container that is scrollable, while keeping the rest of the page fixed? Check out this Stackblitz example. Here's a component called "PageDefault" that includes a Header and wraps each page in the application (the content of the page is passed as the prop "children" inside PageDefault's component).
Desired layout: https://i.sstatic.net/WYrKQ.png
Minimal Example (without react):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.header {
top: 0px;
background-color: green;
height: 100px;
}
.page-title {
height: 300px;
background-color: blue;
}
.content {
position: fixed;
height: 100%;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="header">header goes here</div>
<div class="page-title">page title goes here</div>
<div class="content">
blablabla blablabla blabla bla blabla blablabla bla blabla bla blablabla
blabla bla blabla blablabla blabla bla blabla bla bla blablabla blablabla
blabla bla blabla bla blabla bla blabla bla blablabla blablabla blabla bla
blabla blablabla bla blabla bla blablabla blabla bla blabla blablabla
blabla bla blabla bla bla blablabla blablabla blabla bla blabla bla blabla
bla blabla bla blablabla blablabla blabla bla blabla blablabla bla blabla
</div>
</body>
</html>