CSS layout with fixed top and bottom, variable height middle

Question

+-------------------+ |    Top (fixed)    | +-------------------+ |                   | |                   | |   Middle (fill)   | |                   | |                   | +-------------------+ |   Bottom (fixed)  | +-------------------+ 

The top and bottom are fixed divs. They are positioned on the top and bottom of browser window. I want the middle part to fill the rest of the window between top and bottom divs.

If it's content is more than its height then i can use scrollbars. But its size should not exceed the window.

My CSS and HTML:

html, body, #main  {    height: 100%;  }  #content  {    background: #F63;    width: 100%;    overflow: auto;    height: 100%;    margin-bottom: -100px;  }  #footer  {    position: fixed;    display: block;    height: 100px;    background: #abcdef;    width: 100%;  }

<div id="main">    <div id="content">xyz</div>    <div id="footer">abc</div>  </div>

From this, the Footer shows in the bottom but, the Content div still fills the whole window which should have been [window-footer] height.

Answer 1

Position the middle div using absolute positioning without specifying height. It does not get much simpler than this:

#header {      position: fixed;      top: 0;      left: 0;      right: 0;      height: 100px;      background-color: #abcdef;  }  #footer {      position: fixed;      bottom: 0;      left: 0;      right: 0;      height: 100px;      background-color: #abcdef;  }  #content {      position: fixed;      top: 100px;      bottom: 100px;      left: 0;      right: 0;      background-color: #F63;      overflow: auto;  }

<div id="header"></div>  <div id="content"></div>  <div id="footer"></div>

Use "Full page" option to view the snippet properly.

Answer 2

If you don't know the header or footer sizes and you can use CSS3 then i would suggest to use flexbox layouting.

Example below (or check fiddle)

HTML:

<div class="container"> <div class="header">header</div> <div class="content">content</div> <div class="footer">bottom</div> </div> 

CSS:

.container {   display: flex;   flex-direction: column;   width: 100%;   height: 400px; }  .header {   flex-grow: 0;   background-color: red; } .content {   flex-grow: 1;   background-color: green; } .footer {   flex-grow: 0;   background-color: blue; }