[Résolu] Prendre en compte la hauteur d’une barre d’adresse rétractabl

Bonjour,
J’ai sur mon site un système qui me permet de garder le pied de page... au pied de la page, quel que soit la taille du contenu (pour vous en donner une idée, je l’ai reproduit ici : https://codepen.io/anon/pen/mZqrqd).
Cette solution me semble plutôt adaptée, elle est très précise, fonctionne en pur CSS, n’utilise pas de bidouillage avec des tableaux et ne cache jamais le contenu... à une exception :
Certains navigateurs, notamment Chrome sous Samsung (entre autres) calculent d’une drôle de manière les 100vh. Ils calculent en effet la taille du viewport, puis viennent incruster la barre d’adresse rétractable dans le flux, en poussant le contenu vers le bas. Au final, une barre de défilement apparait et le pied de page est caché. Quand on défile, elle disparait et, cette fois, le contenu est aligné au pixel près, comme prévu.
Avez-vous une idée de la manière de résoudre ce problème (peut-être en Javascript) ?
Merci d’avance !
Modifié par Duchampignon (27 Jun 2019 - 13:39)

Bonsoir,
J’ai trouvé un article qui semble avoir un rapport avec mon problème : Addressing the iOS Address Bar in 100vh Layouts. Pensez-vous que je pourrais régler ce problème avec innerHeight ? Par exemple :

:root, body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	min-height: var(--innerheight);
}

et

window.onload = window.onresize = function() {
var ih = window.innerHeight;
document.documentElement.style.setProperty('--innerheight', ih+'px');
}

Je n’ai malheureusement pas l’appareil en question pour tester le résultat, et surtout je ne sais pas si cette fichue barre d’adresse est inclue dans l’innerHeight.
Modifié par Duchampignon (11 Jul 2019 - 17:33)

Il ne faut pas utiliser de variable CSS, car si Javascript ne fonctionne pas ou bien qu’on l’a mis dans une media query, la variable a une valeur indéfinie, ce qui correspond à 0 (et ne rend pas la propriété invalide comme je l’avais pensé).

Code final fonctionnel :

:root, body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
}
body {
	display: flex;
	flex-direction: column;
}
footer {
	flex-grow: 1;
	display: flex;
	align-items: flex-end;
}

window.onload = window.onresize = function() {
	var ih = window.innerHeight;
	document.documentElement.style.minHeight = ih + "px";
	document.body.style.minHeight = ih + "px";
	}

Et voilà tout
Modifié par Duchampignon (13 Jul 2019 - 16:47)