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

How to only make #content scrollable but keep #header and #sidebar fixed?

And is flexbox the best way to do it?

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>