Site OnePage hauteur des sections égale à 100%

Bonjour,

Pas de problème sur un site pour mettre les pages à 100% du viewport lorsque le contenu est très court ( exemple du footer repoussé en bas de la fenêtre).
Sur un site onepage, il y a une seule page avec plusieurs sections les unes en-dessous des autres. Et lorsque le contenu est trop court, dans le navigateur on voit par exemple la 1° section ( la plus petite) et le début de la suivante.
Est-il possible que chacune des sections remplisse la hauteur de la fenêtre disponible ( car j'ai mis un header fixe) pour ne voir qu'une section?

Merci

Cordialement

Bonjour,

Pas de problème, c'est très simple à faire avec JS. Ici un exemple rapide et tout con avec jQuery :

var hauteurEcran = $(window).height();
$('.maSuperSection').css('min-height', hauteurEcran+'px');

à adapter à ton cas bien entendu
Modifié par audrasjb (13 Mar 2015 - 16:33)

Bonjour.

Je dirais bien ça :

* { padding: 0; margin: 0; box-sizing: border-box }
html, body { height: 100%; }
section { height: 100%; overflow: hidden; }

Modifié par SolidSnake (13 Mar 2015 - 18:12)

Bonsoir

@SolidSnake
a a l'air de fonctionner.. un oubli d'un container....

@audrasjb
Pour le fun, je vais tester ta solution. Qui pourra me servir à un autre moment

Je vous tiens au courant avant de mettre [Résolu]
Merci

Bien sûr, c'est à adapter, l'ajout d'un container ne posera pas de soucis.

Au maximum, j'essaie de faire la mise en page en CSS, ne pas oublier qu'en JS, il faudra relancer le code à chaque resize du navigateur.

SolidSnake a écrit :
Je dirais bien ça :

* { padding: 0; margin: 0; box-sizing: border-box }
html, body { height: 100%; }
section { height: 100%; overflow: hidden; }

J'aime bien la solution de SolidSnake, et je ne l'avais jamais testée auparavant. Pas mal du tout.

Personnellement je ferais une petite variante : pas de height ni d'overflow:hidden sur la balise section - au cas où la section ait besoin de plus de hauteur -, mais juste un min-height:100% : un exemple (édit : je me suis pris au jeux, j'ai fais un petit template complet. La suite de la discution sur ce projet ici : JQuery OnePage : sélectionner une section 'en cours').
Modifié par Olivier C (17 Mar 2015 - 17:05)