: Can you make total height for a 3-div-sandwhich equal 100% if top & bottom divs are in pixels? Possible Duplicate: Any problems with DIVs inside a table cell? Ok so I've got a

@Sue5673885

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.

Vote Up Vote Down

@Bryan171

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>

Vote Up Vote Down

@Karen161

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.

Vote Up Vote Down