Adapter hauteur section à hauteur fenêtre

Sur chrome android

12 mars 2018 à 13:03:11

Bonjour,

Je me permets de venir poster ici car je n'arrive pas du tout à trouver une réponse à mon problème.

J'aimerais que ma section prenne au moins la hauteur de la fenêtre. Un min-height : 100%; semblait suffire mais problème -> Sur tablette et smartphone (chrome android), la hauteur de la fenêtre est modifiée lorsque l'on scroll vers le bas, avec la disparition de la barre d'outils du navigateur. Et là, ça ne s'adapte plus. Avec du JS, je me suis également rendu compte que window.offsetHeight ne se modifiait pas lors de la disparition de la barre.

Bref, je suis perdu, auriez-vous une idée?

PS : Je ne savais pas où poster ce sujet, j'espère que je ne me suis pas trompé, j'hésitais entre css et javascript...

EDIT

-
Edité par lucie_r 13 mars 2018 à 16:18:27

Kaidan

15 mars 2018 à 23:12:13

Je ne suis pas sur que cela puisse aider mais essaie d'ajouter ça à la base de ton CSS :

html{
		height: 100%;
		width : 100%;
}
body{
		height: 100%;
		width : 100%;
		margin: 0 !important;
		padding: 0 !important;
}

De base, toute la largeur est utilisé et la hauteur adapté au besoin... Avec sa tu lui dis que tu veux tout l'écran de base et sans cette marge dégueulasse !
Tu peux éventuellement rajouter une DIV (avec overflow) englobant tout le reste dans le BODY(sans overflow) qui aurait max-height : 100%;

-
Edité par Kaidan 15 mars 2018 à 23:12:30

EmmanuelBeziat

16 mars 2018 à 4:22:47

Salut,

Cette méthode d’héritage depuis la racine du dom (<html>) à coup de height: 100%; n’est pas viable ; s’il y a quoique ce soit entre la cible et l’élément, ça ne marche plus. Du reste, c’est source de problèmes divers (notamment parce que forcer cette hauteur sur <body> peut poser des problèmes de scrolling indésirables, de dépassement et autres).

Beaucoup plus simple :

.ta-section {
    min-height: 100vh;
}

1vh correspond à 1/100ème de la hauteur du viewport. 1vw, idem pour la largeur. C’est parfait pour ce qu’on charche à faire.

Au passage :

Il est très, très, TRÈS important de ne pas utiliser le mot-clé !important en CSS, à moins de vraiment savoir ce qu’on fait et pourquoi, et de bien comprendre les notions de poids et les problèmes de surcharge que ça implique. En l’occurrence, à défaut d’être dangereux ici, c’est parfaitement inutile ; d’autant qu’il n’y a pas de padding sur <body> par défaut.
Il faut arrêter d’utiliser width: 100%;. C’est au mieux inutile, au pire source de dépassement de contenu. https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/

-
Edité par EmmanuelBeziat 16 mars 2018 à 4:23:12

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !