HTML hauteur flottante avec pied

by jeum

HTML

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

<body>
    <div class="container">
        <ul>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
        </ul>
    </div>
</body>

CSS

*.container {
    display: block;        /* implicite */
    position: absolute;    /* fixed or absolute */
    width:500px;           /* LARGEUR FIXE */
    height:auto;           /* remplace 100% */
    margin: 0 auto;        /* centrage horizontal */
    top:20px;              /* POSITION HAUTE */
    bottom:0;              /* remplace 100% */
    left:0;                /* obligatoire */
    right:0;               /* obligatoire */
    margin-bottom:40px;    /* POSITION BASSE (PIED) */
    
    padding:10px;
    background-color: black;
    color: white;
}

JavaScript

// source: http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin?answertab=active#tab-top