Un OnePage avec des sections de hauteur fixes

Les problèmes courants lorsque l’on crée un site ou un onepage avec plusieurs sections,c’est le centrage des éléments, mais aussi et d’abord la taille des sections..doit-on leur donner une taille fixe? est ce qu’un height:100% suffit?
La solution des viewport units n’est pas otpimale en réalité puisque certains navigateurs l’ignorent..donc si vous basez votre site sur ces unités, un safari par exemple va complètement casser votre site.

Pour contourner ces problèmes de taille, une solution consiste à donner comme hauteur la taille de l’écran de l’utilisateur, et cela est facilement faisable en jquery:

jQuery(document).ready(function () {
    vw = jQuery(window).width();
    vh = jQuery(window).height();

    jQuery('#screens li').height(vh);
});

Je récupère la largeur et la hauteur de l’écran et je donne aux éléments souhaités cette largeur ou cette hauteur.

La solution fonctionne, elle permet de créer facilement une page à sections multiples. D’autres exemples sont visibles ici ou la.

Il n’est du coup plus besoin de définir une hauteur à vos sections ou li englobantes, le jquery s’en charge!