Fixed Header, Footer, and Sidebars with scrolling content area in center

Question

Starting with this Demo Template, I would like to create this layout:

But I have the following problems:

• The two sidebars are not contained inside the scrollable content div.
• The content div does not take a fixed size
• The scrollable content does not present a scrollbar when it overflows
• It is preferred if the browser's main scrollbar is used

Can someone help me to fix these issues?

Answer 1

Using display:grid

This uses several new features of CSS that may or may not be supported in your browser of choice. These include Grid Layout, CSS Variables, and position:sticky. CSS Variables can be worked around with static values and Grid/position:sticky can degrade gracefully with @supports.

/* Remove unnecessary margins/padding */  html, body { margin: 0; padding: 0 }    .wrapper {    display: grid;    /* Header and footer span the entire width, sidebars and content are fixed, with empty space on sides */    grid-template-areas:      "header header header header header"      "empty_left sidebar_1 content sidebar_2 empty_right"      "footer footer footer footer footer";    /* Only expand middle section vertically (content and sidebars) */    grid-template-rows: 0fr 1fr 0fr;    /* 100% width, but static widths for content and sidebars */    grid-template-columns: 1fr 100px 400px 100px 1fr;    /* Force grid to be at least the height of the screen */    min-height: 100vh;  }  .header {    grid-area: header;      /* Stick header to top of grid */    position: sticky;    top: 0;    /* Ensure header appears on top of content/sidebars */    z-index: 1;      /* General appearance */    background-color: #FCFF34;    text-align: center;    font-size: 1rem;    line-height: 1.5;    padding: 1rem;  }  /* Save header height to properly set `padding-top` and `margin-top` for sticky content */  :root {    --header-height: calc(1rem * 1.5 + 1rem * 2);  }    .sidebar-1 {    grid-area: sidebar_1;  }  .sidebar-2 {    grid-area: sidebar_2;  }  .sidebar-1,  .sidebar-2 {    display: flex;    flex-direction: column;    position: sticky;    top: 0;      /* Styling to match reference */    background-color: #BC514F;  }    .content {    grid-area: content;      /* General appearance */    background-color: #99BB5E;  }  .footer {    grid-area: footer;      /* Stick footer to bottom of grid */    position: sticky;    bottom: 0;      /* General appearance */    background-color: #FCFF34;    text-align: center;    font-size: .8rem;    line-height: 1.5;    padding: .5rem;  }  /* Save footer height to properly set `bottom` and `min-height` for sticky content */  :root {    --footer-height: calc(.8rem * 1.5 + .5rem * 2);  }    .sticky-spacer {    flex-grow: 1;  }  .sticky-content {    position: sticky;    bottom: var(--footer-height);    min-height: calc(100vh - var(--footer-height));    box-sizing: border-box;      --padding: 10px;    padding:      calc(var(--header-height) + var(--padding))      var(--padding)      var(--padding);    margin-top: calc(0px - var(--header-height));  }

<div class="wrapper">  <div class="header">Header (Absolute)</div>  <div class="sidebar-1">    <div class="sticky-spacer"></div>    <div class="sticky-content">Sidebar 1 Absolute position, Fixed width</div>  </div>  <div class="content">    <div class="sticky-spacer"></div>    <div class="sticky-content">      Scrollable content<br><br>      line 1<br><br>      line 2<br><br>      line 3<br><br>      line 4<br><br>      line 5<br><br>      line 6<br><br>      line 7<br><br>      line 8<br><br>      line 9<br><br>      line 10<br><br>      line 11<br><br>      line 12<br><br>      line 13<br><br>      line 14<br><br>      line 15<br><br>      line 16<br><br>      line 17<br><br>      line 18<br><br>      line 19<br><br>      line 20    </div>  </div>  <div class="sidebar-2">    <div class="sticky-spacer"></div>    <div class="sticky-content">      Sidebar 2 Absolute position, Fixed width<br><br>    line 1<br><br>    line 2<br><br>    line 3<br><br>    line 4<br><br>    line 5<br><br>    line 6<br><br>    line 7<br><br>    line 8<br><br>    line 9<br><br>    line 10    </div>  </div>  <div class="footer">Footer (Absolute)</div>  </div>

Scrollbar in main content container

The content box (including the sidebars) can be set to any type of width (percent, pixel, etc). Only the scrollable content area will scroll (sidebars/footer/header will just overflow the box). I'd suggest adding some media queries to break out of the sidebars so content isn't hidden on smaller devices, or set a min-height on the content box and a min-width on the body.

html, body {      height:100%;      margin:0;      padding:0;  }  header{      width: 100%;      background: yellow;      position: fixed;       top: 0;      height: 60px !important;      opacity:.8;  }    .content {      position:relative;      height: 100%;      width:600px; /* Sizing - any length */      padding:60px 0 30px 0; /* Header height and footer height */      margin:0 auto 0 auto; /* Center content */      -moz-box-sizing:border-box;      -webkit-box-sizing:border-box;      -o-box-sizing:border-box;      -ms-box-sizing:border-box;      box-sizing:border-box;  }    .sidebar1, .sidebar2 {      background: red;      top:60px;      bottom:30px;      width: 100px;      position:absolute;      -moz-box-sizing:border-box;      -webkit-box-sizing:border-box;      -o-box-sizing:border-box;      -ms-box-sizing:border-box;      box-sizing:border-box;  }    .sidebar1 {      left:0;  }    .sidebar2 {      right: 0;  }    #scrollable2 {      background:green;      height: 100%;      min-width: 300px;      margin-left: 100px;      margin-right: 100px;      overflow:auto;      -moz-box-sizing:border-box;      -webkit-box-sizing:border-box;      -o-box-sizing:border-box;      -ms-box-sizing:border-box;      box-sizing:border-box;  }    footer {      width: 100%;      background: yellow;      position: fixed;       bottom: 0;      height: 30px;  }

<!-- Always on top: Position Fixed-->  <header>      header  </header>  <!-- Fixed size after header-->  <div class="content">      <!-- Always on top. Fixed position, fixed width, relative to content width-->      <div class="sidebar1">          sidebar-left      </div>      <!-- Scrollable div with main content -->      <div id="scrollable2">          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>      </div>      <!-- Always on top. Fixed position, fixed width, relative to content width -->      <div class="sidebar2">          sidebar-right      </div>  </div>  <!-- Always at the end of the page -->  <footer>      footer  </footer>

Using the browser's main scrollbar

While using the browser's main scrollbar is possible, it also causes the sidebars to scroll with the page.

html, body {      height:100%;      margin:0;      padding:0;  }  header{      width: 100%;      background: yellow;      position: fixed;       top: 0;      height: 60px !important;      z-index:100;  }    .content {      position:relative;      min-height: 100%;      width:600px; /* Sizing - any length */      padding:60px 0 30px 0; /* Header height and footer height */      margin:0 auto 0 auto; /* Center content */  }    .sidebar1, .sidebar2 {      background: red;      height:100%;      width: 100px;      top:0;      padding-top:60px;      position:absolute;      -moz-box-sizing:border-box;      -webkit-box-sizing:border-box;      -o-box-sizing:border-box;      -ms-box-sizing:border-box;      box-sizing:border-box;  }    .sidebar1 {            left:0;        }    .sidebar2 {      right: 0;  }    #scrollable2 {      height:100%;      background:green;      min-width: 300px;      margin-left: 100px;      margin-right: 100px;      -moz-box-sizing:border-box;      -webkit-box-sizing:border-box;      -o-box-sizing:border-box;      -ms-box-sizing:border-box;      box-sizing:border-box;  }    footer {      width: 100%;      background: yellow;      position: fixed;       bottom: 0;      height: 30px;  }

<!-- Always on top: Position Fixed-->  <header>      header  </header>  <!-- Fixed size after header-->  <div class="content">      <!-- Always on top. Fixed position, fixed width, relative to content width-->      <div class="sidebar1">          sidebar-left      </div>      <!-- Scrollable div with main content -->      <div id="scrollable2">          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>          content-main<br>      </div>      <!-- Always on top. Fixed position, fixed width, relative to content width -->      <div class="sidebar2">          sidebar-right      </div>  </div>  <!-- Always at the end of the page -->  <footer>      footer  </footer>

Answer 2

EDIT
1.Add position property as absolute for the div you wish to fix .
2.Keep the body overflow property auto.

Note: setting the z-index of the body to -1 will make the rest of body inaccessible.
Reference : http://limpid.nl/lab/css/fixed/