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!

5 commentaires sur “Un OnePage avec des sections de hauteur fixes

  1. temime

    bonjour,
    je ne sais pas trop par ou vous contactez donc je me permet de vous posez ma question sur cette section.
    je voudrais connaitre le code source de votre menu sidebarre, en effet je travail actuellement sur un site et je trouve intéressant d’intégrer une side barre de ce type.

    merci d’avance

  2. temime

    Désoler de vous dérangez à nouveau, une dernière question, comment intégré un sous menu dans la sidebar ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.