Astuce css: avoir une DIV qui occupe 100% du viewport

Grâce à CSS3, c'est super simple, il suffit d'utiliser l'unité vh: 100vh = la hauteur du viewport (la zone visible de l'écran)

Du coup, on peut même avoir une barre de menu et d'icônes puis en-dessous une div qui occupe tout le reste du viewport en recourant à calc():

#mon_wrapper{
     height: calc(100vh - 64px); /* 64px = la hauteur du menu+ celle de la barre d'icônes */
}

C'est juste... Beau.

            <link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/style.css"/>
                <link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/>
                <script src="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.js"></script>
                <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});</script>

✍ Écrire un commentaire

Inutile de poster un commentaire à la con pour vous faire de la pub, ce sera filtré et dégagé direct...

Quelle est la deuxième lettre du mot zznvhg ?