Search code examples
cssheightpercentagesticky-footerhtml

CSS "sticky footer" conflicting with percentage height of nested divs?

I have a "main-section" div that is set to inherit it's height from its' parent div, which is the "wrapper" div. The wrapper div is set to inherit it's height from its' parent div, which is the body of the document. The html and body tags are set to height: 100%.

So, in order to use the CSS "sticky footer" (found at http://www.cssstickyfooter.com/), I have to set padding-bottom in the "main-section" div equal to the height of the "footer" div (which has to be outside of the wrapper div). Then, the footer div must be given a negative margin-top value equal to the height of the footer as well.

All of this is working in keeping the footer at the bottom of the page, but I am trying to extend the height of the main-section 100% to the footer so that the background-color of the main-section is visible down the entirity of the page.

I am close in doing this, except the main-section is now extending beyond the footer, and stretching the window beyond 100% height (when there is not enough content to exceed the page height), and the backgroung-color is then visible beyond the footer, beyond the height of the page (which is not desirable).

It seems that the necessary parameter of padding-bottom in the main-section div is causing this problem, even though the footer is set to clear: both and position: relative (which does keep the footer at the bottom of the page, but the main-section div is still extending below the footer quite a bit). Or maybe the min-height: 100% attribute of the wrapper could be causing a conflict?

Here is the relevant html: 

<div id="wrap">

    <div id="header">
        ...
    </div> <!-- end of header -->

    <div id="main-section">
        ...
    </div> <!-- end of main section -->

</div> <!-- end of wrapper -->

<div id="footer">
    ...
</div> <!-- end of footer -->


...and here is the relevant CSS: 

*
{
    margin: 0px;
    padding: 0px;
}

html, body
{
    height: 100%;
}

body
{
    background-color: #bbb;
}

#wrapper
{
    /* wrapper 100% of screen */
        min-height: 100%;

    height: inherit;

    width: 950px;
    margin-left: auto;
    margin-right: auto;
}

    #header
    {
        background-color: #C97;
        line-height: auto;
        text-align: center;

        font-family: "Lucida Console";
        font-weight: bold;
        font-size: 2.5em;
    }

    #main-section
    {
        background-color: #ddd;

        height: inherit;

        /* for a "sticky" footer */
        padding-bottom: 50px; /* equal to the height of the footer */
    }
    #footer
    {       
        clear: both;
        position: relative;

        height: 50px;
        line-height: 50px;
        margin-top: -50px; /* equal to the height of the footer, for a "sticky footer" */

        width: 950px; /* equal to width of wrapper */

        margin-left: auto;
        margin-right: auto;

        text-align: center;

        background-color: #C97;
    }

EDIT: It is important to mention that I am testing this in Firefox.

Solution

  • So, a workaround, that exhibits the same behavior --

    Instead of messing with the nested main-section div, I am applying the background-color to the wrapper div itself (and also not applying postion: absolute to the main-section div, but still applying position: fixed to the footer div).

    This way, the main-section can contain any amount of content, and it will appear to have a 100% height background-color.