CSS Footer immer am unteren Seitenrand positionieren

von dennis

Mit diesem Trick kann ein Footer immer am unteren Seitenrand positioniert werden:

HTML:

<html>
    <body>
        <div id="page">
            <div id="content">
            </div>
        </div>
        <div id="footer">
        </div>
    </body>
</html>

CSS:

html, body { height:100%; }
 
#page { min-height:100%; }
* html #page { height:100%; } /* damit der ie es auch kapiert... */
 
/* unten muss ein bisschen platz für den footer gelassen werden: */
#content { padding-bottom:16px; } 
 
/* footer wird jetzt -16px nach oben gezogen: */
#footer { height:16px; margin-top:-16px; }