How to keep sidebar and header fixed with overflow on content - html

Question

How to only make #content scrollable but keep #header and #sidebar fixed?
And is flexbox the best way to do it?
https://jsfiddle.net/3pnj1k5b/
html,
body {
margin: 0;
}
#page-app {
display: flex;
height: 100%;
background: red;
}
#sidebar {
width: 200px;
background: blue;
}
#header {
height: 60px;
background: pink;
}
#body {
flex: 1;
background: green;
}
#content {
overflow: auto;
}
<div id="page-app">
<section id="sidebar">
sidebar
</section>
<div id="body">
<header id="header">
header
</header>
<section id="content">
content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</section>
</div>
</div>

Answer 1

It's position:fixed that fixes element to their position. It was basically what I've added.
html,
body {
margin: 0;
}
#page-app {
display: flex;
height: 100%;
background: red;
}
#sidebar {
position: fixed;
height: 100%;
width: 200px;
background: blue;
z-index: 2
}
#header {
height: 60px;
background: pink;
position: fixed;
padding-left: 200px;
width: 100%;
z-index: 1;
}
#body {
flex: 1;
background: green;
}
#content {
overflow: auto;
margin-left: 200px;
margin-top: 60px;
}
<div id="page-app">
<section id="sidebar">
sidebar
</section>
<div id="body">
<header id="header">
header
</header>
<section id="content">
content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b content
<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</section>
</div>
</div>

Answer 2

Make the html,body height: 100%;. Then add a max-height to #page-app. Then make #sidebar and #header position: sticky;. Finally, just set the height of #content to be 100% minus the height of the header. In your case I used a calc to set that height. See below:
html,
body {
margin: 0;
height: 100%;
}
#page-app {
display: flex;
max-height: 100%;
background: red;
}
#sidebar {
width: 200px;
background: blue;
position: sticky;
}
#header {
height: 60px;
background: pink;
position: sticky;
}
#body {
flex: 1;
background: green;
}
#content {
overflow: auto;
height: calc(100% - 60px);
}
<div id="page-app">
<section id="sidebar">
sidebar
</section>
<div id="body">
<header id="header">
header
</header>
<section id="content"> content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</section>
</div>
</div>

Answer 3

Make the #header position: sticky and the #body scrollable with overflow-y: scroll;
Codepen here
html,body{
margin:0;
height: 100%;
position: relative;
}
#page-app{
display:flex;
height:100%;
background:red;
overflow-y: hidden;
}
#sidebar{
width:200px;
height: 100%;
background:blue;
}
#header{
height:60px;
background:pink;
position: sticky;
top: 0;
}
#body{
flex:1;
background:green;
overflow-y: scroll;
}
<div id="page-app">
<section id="sidebar">
sidebar
</section>
<div id="body">
<header id="header">
header
</header>
<section id="content">
content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</section>
</div>
</div>