Fixed header footer with scrollable content

Question

How can I get fixed header  footer with scrollable content  Something like this page  I can look at the source to get the CSS  but I just want to know minimum CSS and HTML I need to get this working

User · Answer

Approach 1 - flexbox

It works great for both known and unknown height elements. Make sure to set the outer div to height: 100%; and reset the default margin on body. See the browser support tables.

jsFiddle

_x000D_

html, body {_x000D_
  height: 100%;_x000D_
  margin: 0;_x000D_
}_x000D_
.wrapper {_x000D_
  height: 100%;_x000D_
  display: flex;_x000D_
  flex-direction: column;_x000D_
}_x000D_
.header, .footer {_x000D_
  background: silver;_x000D_
}_x000D_
.content {_x000D_
  flex: 1;_x000D_
  overflow: auto;_x000D_
  background: pink;_x000D_
}

_x000D_

<div class="wrapper">_x000D_
  <div class="header">Header</div>_x000D_
  <div class="content">_x000D_
    <div style="height:1000px;">Content</div>_x000D_
  </div>_x000D_
  <div class="footer">Footer</div>_x000D_
</div>

_x000D_

Approach 2 - CSS table

For both known and unknown height elements. It also works in legacy browsers including IE8.

jsFiddle

_x000D_

html, body {_x000D_
  height: 100%;_x000D_
  margin: 0;_x000D_
}_x000D_
.wrapper {_x000D_
  height: 100%;_x000D_
  width: 100%;_x000D_
  display: table;_x000D_
}_x000D_
.header, .content, .footer {_x000D_
  display: table-row;_x000D_
}_x000D_
.header, .footer {_x000D_
  background: silver;_x000D_
}_x000D_
.inner {_x000D_
  display: table-cell;_x000D_
}_x000D_
.content .inner {_x000D_
  height: 100%;_x000D_
  position: relative;_x000D_
  background: pink;_x000D_
}_x000D_
.scrollable {_x000D_
  position: absolute;_x000D_
  left: 0; right: 0;_x000D_
  top: 0; bottom: 0;_x000D_
  overflow: auto;_x000D_
}

_x000D_

<div class="wrapper">_x000D_
  <div class="header">_x000D_
    <div class="inner">Header</div>_x000D_
  </div>_x000D_
  <div class="content">_x000D_
    <div class="inner">_x000D_
      <div class="scrollable">_x000D_
        <div style="height:1000px;">Content</div>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
  <div class="footer">_x000D_
    <div class="inner">Footer</div>_x000D_
  </div>_x000D_
</div>

_x000D_

Approach 3 - `calc()`

If header and footer are fixed height, you can use CSS calc().

jsFiddle

_x000D_

html, body {_x000D_
  height: 100%;_x000D_
  margin: 0;_x000D_
}_x000D_
.wrapper {_x000D_
  height: 100%;_x000D_
}_x000D_
.header, .footer {_x000D_
  height: 50px;_x000D_
  background: silver;_x000D_
}_x000D_
.content {_x000D_
  height: calc(100% - 100px);_x000D_
  overflow: auto;_x000D_
  background: pink;_x000D_
}

_x000D_

<div class="wrapper">_x000D_
  <div class="header">Header</div>_x000D_
  <div class="content">_x000D_
    <div style="height:1000px;">Content</div>_x000D_
  </div>_x000D_
  <div class="footer">Footer</div>_x000D_
</div>

_x000D_

Approach 4 - % for all

If the header and footer are known height, and they are also percentage you can just do the simple math making them together of 100% height.

_x000D_

html, body {_x000D_
  height: 100%;_x000D_
  margin: 0;_x000D_
}_x000D_
.wrapper {_x000D_
  height: 100%;_x000D_
}_x000D_
.header, .footer {_x000D_
  height: 10%;_x000D_
  background: silver;_x000D_
}_x000D_
.content {_x000D_
  height: 80%;_x000D_
  overflow: auto;_x000D_
  background: pink;_x000D_
}

_x000D_

<div class="wrapper">_x000D_
  <div class="header">Header</div>_x000D_
  <div class="content">_x000D_
    <div style="height:1000px;">Content</div>_x000D_
  </div>_x000D_
  <div class="footer">Footer</div>_x000D_
</div>

_x000D_

jsFiddle

User · Answer

Here s what worked for me  I had to add a margin-bottom so the footer wouldn t eat up my content    header     height  20px    background-color   1d0d0a    position  fixed    top  0    width  100     overflow  hide     content     margin-left  auto    margin-right  auto    margin-bottom  100px    margin-top  20px    overflow  auto    width  80      footer     position  fixed    bottom  0px    overflow  hide    width  100

User · Answer

As of 2013  This would be my approach  jsFiddle      HTML   lt header class  container global-header  gt       lt h1 gt Header  fixed  lt  h1 gt   lt  header gt    lt div class  container main-content  gt       lt div class  inner-w  gt           lt h1 gt Main Content lt  h1 gt       lt  div gt  lt  --  inner-w -- gt   lt  div gt   lt  --  main-content -- gt    lt footer class  container global-footer  gt       lt h3 gt Footer  fixed  lt  h3 gt   lt  footer gt      SCSS     User reset         creates a natural box model layout     -moz-box-sizing  border-box       -webkit-box-sizing  border-box       box-sizing  border-box        asume normalize css      structure   container       position  relative      width  100       float  left      padding  1em         type  body       font-family  arial         main-content       h1           font-size  2em          font-weight  bold          margin-bottom   2em              main-content      style         variables      global-header-height  8em       global-footer-height  6em    global-header       position  fixed      top  0  left  0      background-color  gray      height   global-header-height      main-content       background-color  orange      margin-top   global-header-height      margin-bottom   global-footer-height      z-index  -1     so header will be on top     min-height  50em     to make it long so you can see the scrolling     global-footer       position  fixed      bottom  0      left  0      height   global-footer-height      background-color  gray

User · Answer

Now we ve got CSS grid  Welcome to 2019   x000D   x000D     Required    x000D  body   x000D     margin  0  x000D     height  100   x000D    x000D   x000D   wrapper   x000D     height  100vh  x000D     display  grid  x000D     grid-template-rows  30px 1fr 30px  x000D    x000D   x000D   content   x000D     overflow-y  scroll  x000D    x000D   x000D     Optional    x000D   wrapper  gt      x000D     padding  5px  x000D    x000D   x000D   header   x000D     background-color   ff0000ff  x000D    x000D   x000D   content   x000D     background-color   00ff00ff  x000D    x000D   x000D   footer   x000D     background-color   0000ffff  x000D    x000D   lt body gt  x000D      lt div id  wrapper  gt  x000D         lt div id  header  gt Header Content lt  div gt  x000D         lt div id  content  gt  x000D           Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  x000D         lt  div gt  x000D         lt div id  footer  gt Footer Content lt  div gt  x000D      lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

It works fine for me using a CSS grid  Initially fix the container and then give   overflow-y  auto  for the centre content which has to get scrolled i e other than header and footer   x000D   x000D   container    height  100     left  0    position  fixed    top  0    width  100     display  grid    grid-template-rows  5em auto 3em     header     grid-row  1        background-color  rgb 148  142  142       justify-self  center      align-self  center      width  100       body    grid-row  2    overflow-y  auto     footer     grid-row  3          background  rgb 110  112  112     x000D   lt div class  container  gt       lt header gt  lt h1 gt Header lt  h1 gt  lt  header gt       lt div class  body  gt        Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum      Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum  lt  div gt       lt footer gt  lt h3 gt Footer lt  h3 gt  lt  footer gt   lt  div gt  x000D   x000D   x000D

User · Answer

Something like this   lt html gt     lt body style  height 100   width 100   gt       lt div id  header  style  position absolute  top 0px  left 0px  height 200px  right 0px overflow hidden   gt        lt  div gt        lt div id  content  style  position absolute  top 200px  bottom 200px  left 0px  right 0px  overflow auto   gt        lt  div gt        lt div id  footer  style  position absolute  bottom 0px  height 200px  left 0px  right 0px  overflow hidden   gt        lt  div gt     lt  body gt   lt  html gt

User · Answer

If you re targeting browsers supporting flexible boxes you could do the following   http   jsfiddle net meyertee AH3pE   HTML   lt div class  container  gt       lt header gt  lt h1 gt Header lt  h1 gt  lt  header gt       lt div class  body  gt Body lt  div gt       lt footer gt  lt h3 gt Footer lt  h3 gt  lt  footer gt   lt  div gt    CSS   container       width  100       height  100       display  flex      flex-direction  column      flex-wrap  nowrap     header       flex-shrink  0     body      flex-grow  1      overflow  auto      min-height  2em    footer      flex-shrink  0      Update  See  Can I use  for browser support of flexible boxes

[html] Fixed header, footer with scrollable content

Approach 1 - flexbox

Approach 2 - CSS table

Approach 3 - `calc()`

Approach 4 - % for all

Examples related to html

Examples related to css

[html] Fixed header, footer with scrollable content

Approach 1 - flexbox

Approach 2 - CSS table

Approach 3 - calc()

Approach 4 - % for all

Examples related to html

Examples related to css

Approach 3 - `calc()`