Hauteur 100% et centrage vertical

**dominos** · 02/04/2018, 17h40

Bonjour,

Sur ma page d'accueil inspirée à la base de ce Template free https://www.w3schools.com/bootstrap/...theme_band.asp,
j'ai modifié les blocks de la page accueil pour qu'ils soient chacun de hauteur 100% mais je souhaite aussi que le contenu soit également centré "verticalement",

Pour cela, j'utilise donc une seconde div et 2 classes css suivantes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.container-index {
    padding: 7px;
    padding-bottom: 44px;
    width: 100%;
    min-height: 100%; /* Hauteur des rubriques de la page accueil */
    overflow-x: hidden;
 
    /* Compatibilité recherchée (div centre) : Chrome/Safari/IE/FF/Opéra */    
	height: 100%\0/IE; /* IE... seulement */
 
 
        display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.container-index-center {
	max-width: 1500px; /* largeur maxi par défaut */
	width: 100%;
 
    /* Compatibilité recherchée (div centre) : Chrome/Safari/IE/FF/Opéra */
    height: auto;
 
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

Tout fonctionne mais sous IE, lorsque le contenu d'un block est supérieur à la hauteur de la résolution écran il passe automatiquement comme en mode overflow,
ce qui donne plusieurs overflow pour chaque bloque dans la page.

le problème ne vient pas de l'activation ou désactivation de ce overflow-y, mais du fait que dans la classe "container-index" réside le paramètre height: 100%,

si vous avez une solution pour centrer ces bloques, je vous en remercie d'avance infiniment.

**psychadelic** · 03/04/2018, 15h30

Ton histoire peut devenir compliquée, dès qu'on rentre dans des hauteurs à 100%.

un grand classique avoir oublier de déclarer le html à 100% lui aussi, mais aussi d'avoir aussi "oublié" de mettre un box-sizing: Border-box mais qui n'est pas toujours implémenté suivant le navigateur utilisé
et à la fin on doit se battre avec les margin et les border..

**NoSmoking** · 04/04/2018, 13h56

Bonjour,
du code CSS sans que l'on sache à quels éléments il se rapporte c'est pas gagné pour une aide efficace !

Une page en ligne reste le meilleur.

le problème ne vient pas de l'activation ou désactivation de ce overflow-y, mais du fait que dans la classe "container-index" réside le paramètre height: 100%,

Si tu es persuadé de l'origine alors change ton height:100% pour un min-height:100% ce qui ne verrouillera pas la hauteur, sans aucune garantie pour les raisons exposées ci dessus.

**dominos** · 05/04/2018, 17h07

Merci pour les idées, j'avais déjà essayé min-height et html possède bien un height 100%,
pour l'exemple en ligne, c'est bien le bon lien : https://www.w3schools.com/bootstrap/...theme_band.asp
le code se trouve juste dessous bouton "full source" j'ai juste ajouté une div en plus dans chaque block de l'accueil pour centrer et deux classes css,
si vous avez un idée pour IE, tous les autres navigateurs fonctionnent,

merci d'avance

**NoSmoking** · 06/04/2018, 12h13

pour l'exemple en ligne, c'est bien le bon lien ...le code se trouve juste dessous bouton "full source" j'ai juste ajouté une div en plus dans chaque block de l'accueil

met plutôt une page exemple en ligne car la page met 3 heures à charger des trucs qui nous servent à rien, et j'attends rarement plus de 3s, on pourra voir également sur quels éléments tu as mis tes min-height.