Why is the well-known sticky footer script the way it is?

It's well-known, the script on http://ryanfait.com/sticky-footer/: the sticky footer script!

A sticky footer keeps on the bottom of the viewport, unless the content is longer. Beautiful.

But now, here is a script which seems to do the same thing. The HTML:

<div id="container">
    <div id="content">
        (Paste here your content.)
    </div>
    <div id="push"></div>
    <div id="footer">
        FOOTER
    </div>
</div>

And the CSS:

* {
    margin: 0px;
    padding: 0px;
}
html, body {
    width: 100%;
    height: 100%;
}

div#container {
    position: relative;
    width: 1000px;
    min-height: 100%;
}

div#push {
    height: 32px;
}

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

So if you put the well-known sticky footer script in opposite to mine (as above), which should I use? Are there any advantages or disadvantages?

Answers


Your code appears to fail for older versions of IE because they don't support min-height. The other code implements a workaround so that it will still work for those browsers. Read the last section of this page http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ about "The height: auto !important; and height: 100%; properties".


Need Your Help

Stored procedure with output parameters vs. table-valued function?

sql sql-server tsql stored-procedures user-defined-functions

Which approach is better to use if I need a member (sp or func) returning 2 parameters:

Postgres permission denied on MAC OS X

ruby-on-rails ruby-on-rails-3 macos postgresql osx-lion

I was following the ruby on rails tutorial to run with postgres but when I try the "rake db:create" I get the following error: