Gestion des hauteurs – HTML / CSS Tips and tricks

Les petits trucs HTML 5 et CSS 3 utiles voire indispensables pour les projets web. La gestion de la hauteur peut rapidement devenir un casse tête… surtout quand les contenus sont dynamiques et gérés par un CMS.

Dans tous les projets web on retrouve des petites astuces ou morceaux de code qui reviennent lors de développements frontend. J’ai décidé de partager les miennes dans cet article. Les tips CSS/HTML qui suivent n’ont rien d’extraordinaire et proviennent tous d’un coin du web. Les astuces qui suivent permettent de caler les éléments en hauteurs dans votre page. Les unités vh, vmax,vmin pourraient grandement aider dans la gestion des hauteurs relatives mais encore beaucoup de navigateurs n’implémentent pas correctement ces unités. J’utilise pour mes projets Bootstrap 3 donc pour la suite être familier avec ce framework peut s’avérer utile.

Une astuce qui peut paraître banale mais quand on oublie de la mettre en place le rendu des pages avec peu de contenu et le footer en milieu de page peu faire un peu bizzare. Voyez plutôt :

L’astuce permet de caler le footer en bas de page quelle que soit la hauteur de contenu.


html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#main-container {
	min-height:100%;
	position:relative;
}
main {
       padding-bottom: 100px;
}
footer {
        /* same as padding on main*/
        height: 100px;
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
}


<html>
    <head>...</head>
    <body>
         <div id='main-container'>
                <header>...</header>
                <main role="main">
                <!----- Mon contenu --------->
                </main>
                <footer>.......</footer>
         </div>
    </body>
</html>

Créer une mosaïque de blocks de même hauteur

Pour les pages de présentation on est souvent confronté à une mosaïque. Les blocks sont généralement constitués de texte et d’images et tous ces bloks doivent avoir la même hauteur. D’une manière générale, mieux vaut essayer de contrôler les tailles d’images et de textes mais dans le cas de contenu dynamique (CMS par exemple) il peut être difficile de prédire la hauteur maximale. Si on définit une hauteur fixe et/ou une hauteur maximale, on risque bien un jour d’avoir du contenu coupé. Voici un exemple avec la page d’accueil de mon blog.

La première solution que l’on retrouve est de gérer la hauteur de colonne grâce à un display de type tableau. Le problème est que cette solution n’est pas responsive et n’est pas adaptée quand on a plusieurs lignes. La deuxième solution est proposée par bootsrap : Bootstrap equal-height columns experiment mais cette solution utilise les flex-box qui ne sont pas implémentées par tous les navigateurs et d’après mes tests on a toujours des problèmes avec des lignes multiples.

Ma solution consiste à définir un min-heigth pour tous les blocks correspondant à la hauteur maximale. Pour cela essayer de définir un mn-height en CSS et définir une petite fonction javascript au cas où un block aurait décidé d’être un peu plus grand. Pour tous les blocks, si on défini une class eq-height :

eqHeight = function() {
        var maxHeight = 0;
        $('.eq-height').each(function() {
            var currentHeight = $(this).outerHeight();
            if(currentHeight >= maxHeight) {
                maxHeight = currentHeight;
            }
        });
        $('.eq-height').css('min-height', maxHeight);
    };

Centrer une image verticalement (et horizontalement) dans une div

L’alignement vertical peut être délicat. La solution vertical-align pour les élements inline-block est à privilégier. L’exemple ci-dessous montre comment caler une image verticalement dans un container fixe. Cela peut être utile par exemple pour un slider de taille fixe avec des images de tailles variables.


<div class="container-photo">
	<img src="assets/imag-test.jpg">
  </div>


.container-photo {
    height: 240px;
    width: 350px;
    position: relative;
    border: 1px solid grey;
}

.container-photo img {
    display:block;
    max-width: 70%;
    margin: auto;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

Mettre un texte sur 6 lignes (SASS)

La technique ci-dessous utilise Sass . Elle permet de mettre un texte sur x lignes et de rajouter les « … » .Cela peut être utile pour un résumé par exemple.

$font-size: 14px;
$line-height: 1.4;
$lines-to-show: 6;
h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}