HTML et alignement vertical

Laisser une réponse

Le casse tête du jour: comment aligner du contenu verticalement (en bas) d’un conteneur si le contenu est plus petit que le conteneur, et de faire apparaître une barre de défilement s’il est plus grand?

Ma solution:
Ce n’est clairement pas la seule et probablement pas la meilleur, mais enfin, ça fait le job.
J’utilise un DIV comme conteneur et lui fixe une hauteur de 100% pour qu’il s’adapte lorsque l’on redimensionne la fenêtre (il faut que tous ses parents aient une hauteur proportionnelle à la hauteur du body pour que ça fonctionne).
Dans le conteneur, une table (aïe, j’entends déjà les puristes geindre), une ligne et une cellule.
Dans la cellule, un div avec un overflow:auto et une hauteur fixée en JavaScript (j’entends encore le hurlement des puristes au loin). A mon avis, on n’y coupe pas car seule une cellule peut s’aligner verticalement, et la cellule va forcément être poussée par son contenu (pas de barre de défilement). Si on essaie de mettre au div une hauteur relative à son contenant (la cellule), elle va juste s’agrandir avec cette dernière et la barre de défilement n’apparaîtra pas.

Un exemple valant mille mots, voici le résultat:
A voir sur jsfiddle

Le HTML

    <div id="context">
        &lt;!--<div>ceci est le contexte (la page ou le conteneur)</div>--&gt;
        <div id="container">
            &lt;!--<div>Conteneur pour notre contenu à hauteur fixe alligné en bas</div>--&gt;
            <table id="table">
                <tr>
                    <td style="vertical-align: bottom">
                        <div id="fixedHeight">
                            <div id="naturalHeight">
                            <!-- on peut ajouter ce que l'on veut dans ce div -->
                            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere, purus et mollis luctus, sem magna egestas turpis, a mattis enim ligula in arcu. In hac habitasse platea dictumst. Sed dapibus lacus in felis dapibus, vel ultricies orci rutrum. Mauris porttitor mauris sed diam tincidunt, id rhoncus est posuere. Ut nec augue sed ligula tempus tempor. Suspendisse arcu velit, feugiat eget vehicula vitae, tincidunt eget justo. Praesent id gravida tellus, in ultrices enim. Integer ut dapibus diam, at suscipit risus. Nulla facilisi. Etiam ipsum neque, tincidunt eu pretium vel, accumsan ut magna. Vestibulum et interdum augue, vel mollis velit.</div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

Le CSS

#context {
    height:300px;/* valeur arbitraire, dans mon cas effectif, j'utilise 100% */
    width:50%;/* pas d'utilité particulière, si ce n'est l'esthétique de l'exemple */
    margin:50px;/* pas d'utilité particulière, si ce n'est l'esthétique de l'exemple */
    background: lightblue;
}
#container{
    background:lightgreen;
    height:100%;/* On prends tout l'espace disponible */
}
#table{
    height:100%;
    width:100%;
    max-height: 100%;
    max-width: 100%;
}
#table td{
    padding:0;/* ainsi la cellule ne mange pas d'espace et reste vraiment invisible*/
}
#fixedHeight {
    overflow: auto; /*la barre de défilement apparait quand le contenu est plus grand que le contenant */
    height: 0; /* hauteur initiale, sera mise à jour par le javascript */
    background:beige;
}

Et le JavaScript

var setHeight = function () {
    var f = $("#fixedHeight");
    var container = $("#context")[0];
    var availlableSpace = container.clientHeight;
    var contentHeight = $(f.children().first()).outerHeight();
    var fixedHeight = availlableSpace &gt; contentHeight ? contentHeight : availlableSpace;
    f.css("height", fixedHeight);
    if (availlableSpace &lt; contentHeight) {
        f[0].scrollTop = contentHeight - availlableSpace;
    }
};

$(&quot;#context&quot;).resizable()
    .resize(setHeight);
setHeight();