Tu souhaites créer une colonne verticale sur toute la hauteur de page? Ça tombe bien, tu es au bon endroit !

Nous allons utiliser la méthode moderne avec Flexbox.

La méthode Flexbox

La méthode Flexbox est un standard CSS3 de disposition des éléments dans une page web. Ce standard permet d’avoir un design adaptatif à l’écran (smartphone, PC, tablette…).

                                                                                                                                                           HTML

<body>
<div class=colonne>
Ma colonne
</div>
<div class=”content“>
Le contenu de ma page
</div>
</body>

                                                                                                                                                           CSS

body {
margin: 0;  /*la direction suit une ligne */
display: flex;
flex-direction: row;
align-items: stretch;
min-height: 100vh; 
}

Qu’est-ce qu’on fait ici ? Dans l’ordre :

  • on dit d’abord à notre élément d’adopter la mise en forme flex : c’est une propriété qui définit la capacité d’un élément flexible à modifier ses dimensions afin de remplir l’espace disponible de son conteneur. 
  • avec la propriété flex-direction ont définit la façon dont les éléments flexibles sont pplacés dans un conteneur flexible : elle définit l’axe principal et la direciton des éléments. La valeur row représente l’axe horizontal allant de la droite à la gauche (dans le sens de la lecture). Il existe trois autrees valeurs : row-reverse, column, et colum-inverse.
  • et avec align-items pour respectivement l’obliger à aligner ses descendants directs sur une ligne, et obliger ceux-ci à faire toute la hauteur du conteneur (pour nous, .site).
  • enfin, on dit au conteneur de faire au minimum la hauteur de la fenêtre du navigateur avec l’unité VH. Par  ici, un petit guide sur les unités de mesure en CSS (1cm=37.8px).

Bien, maintenant il ne reste qu’à personnaliser sa colonne, en n’oubliant pas notamment de lui donner une largeur :

                                                                                                                                                           CSS

.colonne {
width: 20rem;
/* Tout ce que vous voulez */
}

Simple, non ?