28172 sujets

CSS et mise en forme, CSS3

Un site qui s'ajuste à 100% de la hauteur du navigateur

Bonsoir

Je souhaite que mon site (tout au moins sa page d'accueil) s'affiche toujours en 100% de la hauteur du navigateur. Il s'agit d'un site fait sous WordPress avec le thème Divi. La page d'accueil est composée de plusieurs zones de contenu empilées les unes sur les autres et centrées. Je voudrais que la largeur de ces blocs puisse varier afin de permettre un affichage qui soit toujours en pleine hauteur du navigateur.
Après quelques recherches, j'ai essayé ce code :

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}


Pourtant le site passe dépasse toujours sous la ligne de flottaison, la largeur des blocs ne change pas.
Voilà, si quelqu'un a une piste...

Merci de m'avoir lue. Julie
Modifié par lewebdejulie (06 Mar 2016 - 22:11)
Bonjour,

La règle importante dans le processus, et qui est la bonne, est celle-ci (valable seulement pour les navigateurs récents) :
min-height: 100vh;

Maintenant, si le contenu de la page est important il est normal que le site "dépasse sous la ligne de flottaison", et heureusement.

Si vous voulez forcer tout de même la hauteur il vous faut plutôt appliquer cette règle :
height: 100vh;

Mais gare au bugs avec cette solution ! En effet, elle va forcément clacher avec les petites résolutions. Cette solution n'est valable que pour une application, et encore pour un terminal bien définit.

Voici l'exemple que j'avais réalisé pour un forumeur d'Alsacreations qui avait fait la même demande, solution que je déconseille fortement cependant : CodePen.
Olivier, merci pour ta réponse.
Pourtant, que j'applique min-height: 100vh ou height: 100vh sur le body, rien ne change.
Je prends bonne note de ta remarque. Je sais déjà que ce n'est pas une bonne pratique, mais on me le demande alors... j'essaie.
lewebdejulie a écrit :
Pourtant, que j'applique min-height: 100vh ou height: 100vh sur le body, rien ne change.

Visuellement peut-être dans une configuration donné, mais pas dans tous les cas : min-height permettra un débordement si besoin, height ne le permettra pas.

lewebdejulie a écrit :
Je sais déjà que ce n'est pas une bonne pratique, mais on me le demande alors... j'essaie.

Ah oui. Même en ne faisant que du web bénévole, je connais ça...
Je vois...

Bon, étant donné qu'il s'agit principalement d'images et d'un vidéo, moi je répartirais bien un pourcentage de la hauteur pour chaque éléments avec les vh units. Et voilà.

Exemple pour le conteneur des images "codes barres colorées" :
.maClasse {
    height: 20vh; /* 20% de la hauteur */
    overflow: hidden; /* pour éviter les débordements */
}
Cette solution fonctionne mais le overflow hidden tronque. Moi je veux que ça resize en gardant les proportions...
lewebdejulie a écrit :
Cette solution fonctionne mais le overflow hidden tronque. Moi je veux que ça resize en gardant les proportions...

Certes, mais alors il va falloir trouver un compromis.

En effet, si vous choisissez de respecter le ratio la compatibilité avec la page à 100% de hauteur va être compromise. Ou alors vous aller vous retrouver avec des largeurs d'éléments qui ne ferons plus 100% sur certaines configurations. Bref, il va falloir faire des choix.

Ce n'est pas une limitation technique, c'est une limitation de concept : on peut fabriquer des ronds ou des carrés, mais on ne peut pas fabriquer des ronds qui soient carrés en même temps...
Sujet clos
Aller à