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

Question

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

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));
}

Header (Absolute)

  

  
Sidebar 1 Absolute position, Fixed width


  

  

    Scrollable content


    line 1


    line 2


    line 3


    line 4


    line 5


    line 6


    line 7


    line 8


    line 9


    line 10


    line 11


    line 12


    line 13


    line 14


    line 15


    line 16


    line 17


    line 18


    line 19


    line 20
  


  

  

    Sidebar 2 Absolute position, Fixed width


  line 1


  line 2


  line 3


  line 4


  line 5


  line 6


  line 7


  line 8


  line 9


  line 10
  

Footer (Absolute)

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;
}

    header



    
    

        sidebar-left
    
    
    

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

    
    
    

        sidebar-right
    



    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;
}

    header



    
    

        sidebar-left
    
    
    

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

        content-main

    
    
    

        sidebar-right
    



    footer