Accueil > Portfolio > Web > CSS : Hauteur 100% et footer en bas de page

CSS : Hauteur 100% et footer en bas de page

mardi 21 juillet 2009, par Matthieu

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>CSS Layout - 100% height</title>
</head>
<body>

        <div id="container">

                <div id="header">
                        haut de page
                </div>

                <div id="content">
                        contenu
                </div>

                <div id="footer">
                        Pied de page
                </div>
        </div>

</body>

Le css :

html,body {
        margin:0;
        padding:0;
        height:100%; /* needed for container min-height */
}

div#container {
        position:relative; /* needed for footer positioning*/
        height:auto !important; /* real browsers */
        height:100%; /* IE6: treaded as min-height*/
        min-height:100%; /* real browsers */
}

div#header {

}


div#content {
        padding:1em 1em 5em; /* bottom padding for footer */
}


div#footer {
        position:absolute;
        width:100%;
        bottom:0; /* stick to bottom */
}

Messages