First I’d like to thank the members here for the informative 100% height and sticky footer faqs and articles. However–and you knew this was coming–I am trying to combine the two (somewhat). Now, I’ve more-than-likely missed something betwixt the two articles that would solve my problems, but I’m not so sure as the sticky footer requires min-height set at a level above, in the hierarchy, where I need to guarantee the element’s height is at least 100% (min-height). For example, I want a form, its fieldset, and a table–don’t ask it’s how some Telerik controls are rendered–to be 100% of the remaining viewport, after the header and footer are tallied. I’ve whipped together a test starting point for your perusal (please take note of the DOCTYPE, as it’s required for Telerik controls). Hopefully, the markup posts correctly:
I’m not sure why you would want multiple 100% high elements but the only way to do something like that is to fake it as already shown in my example (apart from using display:table properties of course.)
Here is the same example with yet another apparent 100% high element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
html, body, h1, p, form, fieldet, h2 {
margin:0;
padding:0
}
html, body {
height:100%;/* needed to base 100% height on something known*/
text-align:center;
}
#outer {
width:100%;
background:#ffffcc;
margin:auto;
min-height:100%;
margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
text-align:left;
}
* html #outer {
height:100%
}
#header {
background:red;
border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
border-bottom:20px solid #ffc;
}
#footer {/* footer now sits at bottom of window*/
background:red;
width:100%;
margin:auto;
height:40px;/* must match negative margin of #outer */
clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
h1, h2, p {
padding:0 10px;
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
clear:both;
display:block;
height:1%;
content:" ";
}
/*........ abssolute columns ..........*/
.abs, .abs2 {
position:absolute;
bottom:10px;
left:10px;
right:10px;
height:999em;
border:1px solid #828177;
border-top:none;
background:#eaf5ef;
z-index:1;
}
.inner {
margin:0 10px 1em;
border-top:20px solid #eaf5ef;
}
h2{
margin:0 2px 1em;
padding:20px;
border-top:1px solid #000;
}
.abs2 {
background:#d5eaff;
left:22px;
right:22px;
bottom:20px
}
.abs b, .abs2 b {
height:999em;
display:block;
}
#header, #content, #outer {
position:relative;
z-index:2;
}
#outer {
z-index:1;
}
#content {
border-top:10px solid #ffc;/* hide top of absolue column*/
margin:0 10px;
}
.field {
border:none;
border-top:1px solid #828177;
}
</style>
<!--[if (lte IE 7)]>
<style type="text/css">
</style>
<![endif]-->
</head>
<body>
<div id="outer">
<div id="header">
<h1>Sticky Footer</h1>
</div>
<div id="content">
<div class="field">
<div class="inner">
<h2> Ultimate Sticky footer that works in ie5/6/7/8,
Opera 9 and 10, Firefox 2+, Chrome, Safari 3+
(and<a href="http://www.browsercam.com/public.aspx?proj_id=490004">probably every other modern browser</a>) </h2>
</div></div>
</div>
<div class="abs"><b></b></div>
<div class="abs2"><b></b></div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
If you wanted more elements then you’d have to follow the same process and use the absolute background column technique. It gets a bit fiddly but is possible to a degree as you can see.
Paul, I appreciate the informative response and apologize for my inaccurate description of my need. I’m looking to take this a step further by ensuring–for some of the middle content’s contained elements (e.g. form)–the height is 100% of their parent, for form, this would be the content div–which is intended to be 100% of the height of the viewport, minus the header and footer. I could leverage table, table-row, and table-cell to somewhat display this properly in IE8 and other browsers, but (sadly), as this is a relatively closed environment, I need to support only IE >= 6 (potentially could constrain to 7). I’m thinking I may have to resort to a hybrid of javascript for IE 6 and 7 and display table for IE 8 (and 9 beta). Any help, or further understanding, would be greatly appreciated.
It does indeed work for the first child element, but I am looking at having 100% remaining height for subsequent children, potentially n-levels deep.
The following modification of your code in post #3 illustrates my need (I hope), as it shows the subsequent child h2 (could be a div, or any other block element) is not taking on its parent height.
<h2 style="background: #d5eaff; height: 100%;">
Ultimate Sticky footer that works in ie5/6/7/8,
Opera 9 and 10, Firefox 2+, Chrome, Safari 3+
(and<a href="http://www.browsercam.com/public.aspx?proj_id=490004">probably every other modern browser</a>)
</h2>
Again, your help in this matter is greatly appreciated.
My example in post 3 shows how to make the middle element take up the remaining space from the footer to the header which i believe is still what you asking.
If this is not the case then I might need a drawing or diagram to get a better idea of what you want:) It still sounds as though my answer in post #3 is what you are looking for though.
You just need to be creative as you can’t have multiple 100% high elements so you could use the absolute columns technique mentioned for the side borders and column colours then you’d need to fake the top of the fieldset with a top border etc.
You could also probably use display:table/table-cell etc instead for ie8 and other modern browsers.