Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

enter image description here

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

share|improve this question

marked as duplicate by danlefree May 10 '11 at 7:27

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

    
See this answer on a migrated question. If anyone can provide something similar or if possible better after seeing the correct result, I can accept an answer but atm neither of these is really what I asked about sry. –  Garet Claborn May 9 '11 at 6:23
    
Merging per request. –  danlefree May 10 '11 at 7:27
add comment

3 Answers 3

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.

share|improve this answer
1  
This is somewhat close, I can make a sticky footer fairly easily though I'm really liking the way they're implementing this on resize =D You could say what I've got is a sticky header and a sticky footer. The main overflow is disabled letting the content div in the middle handle the scrollbar. –  Garet Claborn May 5 '11 at 19:32
add comment

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>
share|improve this answer
    
Well again this is close but not quite. See how the lower part of body get's cut off by the footer if you scroll all the way down? This is the same issue I'm having on my closest attempt. Just to reiterate, the main goal is to have the scrollbar exist only for the content's overflow so I need a div that can change size to (100% - [headerHeight + footerHeight]) –  Garet Claborn May 6 '11 at 13:20
    
To prevent the cutoff, you can add padding-bottom:50px to the #content div: jsfiddle.net/4bHsm/3 I'd recommend against inset scrollbars; they are both ugly and frustrating to use, mostly because they're not widely adopted as a page scrolling method on other websites. There are times when nested scrollbars are useful, but I'd suggest that this isn't one of them. –  Nick May 6 '11 at 13:35
add comment
up vote 0 down vote accepted

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.

share|improve this answer
    
No one was answering after I had the answer from related question on SE so..after posting the link and waiting, I put it up. –  Garet Claborn May 10 '11 at 7:00
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.