1 - Un site qui prend toute la hauteur disponible avec flexbox
<body>
<div class="page">
<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>
</div>
</body>
Nous allons donc simplement appliquer display: flex; à body, et spécifier le comportement de ses descendants direct en tant que colonnes. Puis nous diront simplement à .site-content d’utiliser toute la hauteur disponible.
CSS
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex: 1;
}