Footer is obscuring content in simple 1 column sandwiched css layout

Question

I'm trying to get a seemingly simple mechanic to work with CSS only and I just keep running into walls.

The general layout is that I have a single column layout with a header and footer. I want the header and footer to stay "fixed" to the top and bottom of the viewport and I want the center section to adjust to fill the rest of the space with a vertical scroll bar if there is too much content.

I feel that I am very close, but the issue is that the central div extends to the bottom of the page behind the footer. I'm guessing the problem is that I've specified the height of the central div to be 100%... I guess it boils down to not knowing how to subtract the fixed footer height and keep the central div responsive. Can this be be done with a purely CSS trick or do I need to use javascript to query the screen size and calculate the offset?

I've tried adding padding and margins to the bottom of the central div. It didn't work and even if it had, at best all the content would be visible but the scroll bar would still slip behind the footer. Which is not so clean. Any help would be appreciated. Thanks!

HTML:

  <div class="container">
      <div class="header">Header</div>
      <div class="content">
         <h2>Layout</h2>
         LOTS of text
      </div>
      <div class="footer">
         <p>Footer</p>
      </div>
  </div>

CSS:

html,
body { height: 100%; 
overflow:hidden;}

.container {
    width: 70%;
    background-color: #FFF;
    height: 100%;
    position:relative;
    overflow:hidden;    
}

.header {
    background-color: #6F7D94;
    height: 60px;
}

.content {
    position:relative;
    padding: 10px 10px;
    overflow-y:scroll;
    overflow-x: hidden;
    height:100%;
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    height: 60px;
    width: 100%;
    padding: 0;
    background-color: #6F7D94;
}

Here is my Jfiddle

Answer 1

You can use position:absolute; on your .content too like this :

FIDDLE

.content {
    position:absolute;
    top:60px; /* height of header */
    left:0;
    bottom:60px; /* height of footer */
    padding: 10px 10px;
    overflow-y:scroll;
    overflow-x: hidden;
}