Can you make total height for a 3-div-sandwhich equal 100% if top & bottom divs are in pixels? [duplicate]

Question

Possible Duplicate:
Any problems with DIVs inside a table cell?

Ok so I've got a header and a footer with absolute positioning and heights of 144px. The content div in the middle area needs to be the full height of the area in between.

Simplified:

<style>
  .sandwich{
    position: absolute;
    height: 144px; 
    width: 100%; 
    left: 0;
  }
  #header{ top:    0px; }
  #footer{ bottom: 0px; }
</style>

<div id="header" class="sandwich"></div>
<div id="content"> Content </div>
<div id="footer" class="sandwich"></div>

So basically I want a div that is 100% - 288px. At first I thought I could just make a 100% x 100% div with 144 padding on top and bottom and then stuff the content div in there at 100% but my thinking has gone stray somewhere.

Here's an example I made using 20% height for 'bread layers'. (Which I can't do on this project) Used 60% height for the scrolling 'meaty layer' and put it at top: 20%;

Answer 1

Sounds to me like no matter what, you're wanting the footer to be at the very bottom of the screen, even if there's no content in between the header and footer. Is this accurate? If so, you're looking for a "sticky footer" solution. There's tons of methods out there, you can give this one a try to start off with: CssStickyFooter.

Answer 2

Use position:fixed and z-index:10 on the .sandwich class to keep your header and footer static above the #content div, then style the body to get your background red colour to fill the space between. Live demo here.

<style>

    body{
        background-color:red;
        padding:0;
        margin:0;
    }

    .sandwich{
        position:fixed;
        height: 50px;
        width: 100%; 
        background-color:grey;
        z-index:10;
    }

    #header{ top: 0px;}
    #footer{ bottom: 0px;}

    #content{ position:absolute; top:50px; }  
</style>

<div id="header" class="sandwich"></div>
<div id="content"> Content goes here</div>
<div id="footer" class="sandwich"></div>

Answer 3

Simply add the following CSS:

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
#content{
  position: absolute; 
  top: 144px; 
  bottom: 144px; 
  left: 0px;
  width: 100%;
  overflow: auto; 
}

And presto.