I'm trying to make a fixed div that it's a container and i want to make only this container be scrollable, the rest of the page I want to be fixed.
Here is what I have: Stackblitz.
Here's a component called "PageDefault" that has the Header and involves each page in application(the content of the page is the prop "children" inside PageDefault's component).
Here is what I would like to do:
Minimal Example of what I have(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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
