CODEWITHSUNDEEP
htmlcssfirefoxfooter
Sloth Armstrong
Sloth Armstrong

Reputation: 1066

Sticky footer not working in Firefox when using a table display

I am using the sticky footer technique outlined in this post in my website. For 90% of the pages on my site the sticky footer works perfectly. In the other 10% of pages I am running into an interesting issue in Firefox. Essentially in these pages I want to center the content of my page vertically so I am adjusting the CSS code in the post as so:

    html, body {
    height: 100%;
    }

    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    display: table; /* <--- THE NEW LINE OF CODE */
    }

    .footer, .push {
    height: 4em;
    }

This allows me to vertically center the div inside of .wrapper by simply assigning it to the following class:

.table_row {
    display: table-row;
    vertical-align: middle;
}

In Safari, Chrome, etc., the sticky footer remains placed at the bottom of the page and the content is nicely centered vertically. In Firefox, however, the sticky footer is place immediately following the content causing the content to get squished to the top of the page below the header. Here is a sample of what the HTML might look like in this situation:

     <html>
        <head>
            <link rel="stylesheet" href="layout.css" ... />
        </head>
        <body>
            <div class="wrapper">
                <div class="table_row"><p>Your website content here.</p></div>
                <div class="push"></div>
            </div>
            <div class="footer">
                <p>Copyright (c) 2008</p>
            </div>
        </body>
    </html>

and here is its JSFiddle.

I have tried adjusting heights, min-heights, etc. in CSS but have had no luck. At this point I am at a complete loss on a solution so any help or guidance is appreciated.

Thanks.

Upvotes: 0

Views: 862

Answers (1)

Dexa
Dexa

Reputation: 1651

Remove height: auto !important; line and it will work.

Upvotes: 2

Related Questions