Sticky Footer with Fluid height content

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:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <style type="text/css">
        html, body
        {
            border:0;
            margin:0;
            padding:0;
            height:100%;
        }
        
        #container
        {
            background:#f5efea;
            min-height:100%;
            margin-top:-50px;
        }
        * html #container{ height:100%; }
        
        #header
        {
            border-top:50px solid #ffffff; /* soaks up negative margin */
        }
        
        #content
        {
            background:#eaf5ef;
            width:100%;
        }
        
        #footer
        {
            background:#eaeff5 url(images/rectangleshadedblue_footer.jpg) repeat-y;
            height:50px; /* needs to match the container negative margin */
            width:100%;
            text-align:center;
            clear:both;
        }
        
        /* IE8 and Opera Fix */
        body:before
        {
            content:"";
            height:100%;
            float:left;
            width:0;
            margin-top:-32767px; /* negates float effect */
        }
        #container:after
        {
            clear:both;
            display:block;
            height:1%;
            content:" ";
        }

        /* ignore below--for Telerik skinning and web page lnf */
        
        .separator { background:#f47a00; } /* for IE 8 */
        
        .left { float:left; }
        .right { float:right; }

        /* clearfix styles taken from: http://www.webtoolkit.info/css-clearfix.html */
        .clearfix:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; }
        .clearfix { display:inline-block; }
        /* Hides from IE-mac \\*/
        * html .clearfix { height:1%; }
        .clearfix { display:block; }
        /* End hide from IE-mac */
        /* END clearfix */
        form label { color: #626262; }
        
        form input[type="text"], form input[type="password"],
        form textarea, form textarea[disabled]:hover,
        form input[disabled][type="text"]:hover,
        form input[disabled][type="password"]:hover
        {
            background-color: #ffffff;
            border: 1px solid #6788be;
            -moz-border-radius: 4px 4px 4px 4px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header">
            <div class="clearfix">
                <div class="left" style="height:70px; white-space:nowrap;">
                    <img alt="" src="images/logo.jpg" height="52" border="0" />
                </div>
                <div class="right" style="text-align:right; white-space:nowrap;">
                    <img alt="" src="images/spacer.gif" width="127" height="52" />
                </div>
            </div>
            <div style="background:#000; height:1px;"></div>
            <div>
                TOP NAV<br />
                SUB NAV
            </div>
        </div>
        <div id="content">
            <form action="" method="post">
                <fieldset>
                    <legend>Testing</legend>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </fieldset>
            </form>
        </div>
    </div>
    <div id="footer">
            Copyright &copy; 2010
    </div>
</body>
</html>

Hi,

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.

Here’s an example where I’ve added a 100% fieldset in the middle.


<!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 {
    position:absolute;
    bottom:10px;
    left:11px;
    right:11px;
    height:999em;
    border:1px solid #828177;
    border-top:none;
    background:#eaf5ef;
    z-index:1;
}
.abs b {
    height:999em;
    display:block;
}

#header,#content,#outer{position:relative;z-index:2;}
#outer{z-index:1;}
#content{
    border-top:10px solid #eaf5ef;/* hide top of absolue column*/
    margin:0 10px;
}
fieldset.field{
    border:none;
    border-top:1px solid #828177;
    position:relative;
    top:-10px;
}
legend{position:relative}
fieldset span{
    padding:5px;
}

</style>
<!--[if (lte IE 7)]>
<style type="text/css">
.abs{left:10px;right:10px}
</style>
<![endif]-->

</head>
<body>
<div id="outer">
    <div id="header">
        <h1>Sticky Footer</h1>
    </div>
    <div id="content">
        <fieldset class="field">
        <legend><span>Legend</span></legend>
        <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>
        </fieldset>
    </div>
    <div class="abs"><b></b></div>
</div>
<div id="footer">
    <p>Footer</p>
</div>
</body>
</html>


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. :slight_smile:

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.

Hi,

You can’t make the fieldset stretch to 100% but you could make a bordered box with background colour fill the remaining viewport.

You will find an example here which shows the two techniques needed. (There is another [URL=“http://www.pmob.co.uk/temp/100-with-rightbar.htm”]example here but uses the old sticky footer method (although it still works fine))

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.