1

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

2
  • 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. May 9, 2011 at 6:23
  • Merging per request.
    – danlefree
    May 10, 2011 at 7:27

3 Answers 3

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.

1
  • 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. May 5, 2011 at 19:32
1

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>
2
  • 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]) May 6, 2011 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, 2011 at 13:35
0

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.

1
  • 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. May 10, 2011 at 7:00

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