•  10-10-2019
  •  | 
  •  

Question

I am having issues making my footer stick to the bottom of the page in all browsers.

I have the following document structure:

<html>
    <head>
    </head>

    <body>
        <div id="wrapper">
            <div id="header">
                <ul>
                    <li>home</li>
                </ul>
            </div>

            <div class="expander"></div>
        </div>

        <div id="footer" class="expander">
        </div>
    </body>
</html>

Relevant CSS is:

body
{
 margin: 0;
 height: 100%;
}

#wrapper
{
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -116px; 
}

.expander
{
 height: 116px;
}

#footer
{
 width: 100%;
}

#header ul
{
 list-style: none outside none;
 clear: both;
 margin: 0;
}

#header li
{
 margin: 0;
 margin-right: 20px;
 padding: 0;
 display: inline-block;
 height: 85px;
 padding-top: 20px;
 margin-bottom: -20px;
}

When used without any doc type, the page renders as I intend it to in Chrome and Firefox. In IE8, however, the list item tabs are on separate lines

When I add an XHTML doctype, the page renders correctly in IE8 except the footer is not drawn at the bottom of the page in IE8, Chrome or Firefox, i.e. the footer sits directly below the menu bar.

Example doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

What am I doing wrong?

Was it helpful?

Solution

Testing with the DOCTYPE in the code:

Changing:

body
{
 margin: 0;
 height: 100%;
}

to:

html, body
{
 margin: 0;
 height: 100%;
}

fixes it for me.

OTHER TIPS

You need to let the footer stay at the bottom of the page i.e.

body, html{
    margin:0;
    height:100%;
}

#footer{
    position:absolute;
    bottom:0px;
    width:100%;
}

Note: this solution is thought to avoid wrapper height tricks/problems

In addition to using the wrong doctype, as I mentioned above, changing or removing doctypes is never an option. Essentially, it's the set of rules you are telling the browser you are using to create the page. You can't be changing the rules in midstream or on a whim. Change/remove the doctype, change the rules.

Never, EVER use IE as a reference for how things work. Inept at best, it's a decade or more behind all others in modern standards and compliance. If it's working in FF and Chrome then your markup is most likely correct.

Life has just called and I hope to give more info later.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top