mardi 5 février 2013

Hauteur dynamique d'un bloc sans javascript


Souvent le contenu déborde du cadre dans lequel il est placé, ce qui ne donne pas une bonne image à l'internaute.

Sans utiliser du javascript, il est possible de rendre la hauteur d'un bloc (div) automatique; c'est-à-
dire qui change en fonction de son contenu. Dans l'exemple suivant nous avons un conteneur parent et un conteneur fils. La hauteur du conteneur parent vas changer de valeur en fonction du conteneur fils. On parle d'un conteneur à hauteur variable ou un div dynamic. Rien qu'avec du css.



Partie CSS

.div_parent
{
min-height:20px;
height:auto !important;
height:20px;
}

.div_enfant
{
height:100%;
}

Partie HTML

<div class="div_parent">

     <div class="div_enfant">
     Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
    </div>


</div>

Aucun commentaire:

Enregistrer un commentaire