SolykZ a écrit :
Donc, en gros, j'ai besoin d'une solution me permettant de :
- Etendre ma page jusqu'au bas de l'écran (ça c'est fait)
- Le menu, l'entête et le pied de page soient fixes (là, si je touche à rien, c'est le cas)
- Le div#contenu soit fixe mais disposant d'une barre de défilement verticale en cas de contenu trop grand (c'était le but de l'emploi du tuto me posant problème sur ce topic)
La question est donc : que faire pour pouvoir bénéficier d'une barre de défilement verticale uniquement sur div#contenu, quand aucune hauteur fixe ne lui est attribuée !
Bon, si on avait voulu uniquement une page avec une bordure rouge, mais extensible en hauteur, on aurait pu faire ça :
html {
min-height: 100%;
margin: 0; padding: 0;
font-size: 100%;
}
body {
min-height: 100%;
border: solid red;
border-width: 0 20px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
}
Sauf que toi, comme tu veux jouer au malin plutôt que de comprendre que le média web n'est pas figé en hauteur (c'est malin, ça !
), tu décides d'essayer de faire un truc impossible sauf avec bidouilles inommables et pas robustes pour deux sous.
Rah la la...
Allons-y pour voir.
Déjà, il me semble que tu peux te passer de la div#page, surtout si tu utilises toute la largeur de l'écran pour ta mise en page. Bon, là je vais la garder mais sache qu'on peut la virer (et positionner le pied de page par rapport à body, du coup... sans avoir besoin de positionner body, il me semble).
Bref, déjà il faut que tous les éléments soient bloqués au maximum à 100%. Donc, cette fois, pas de
min-height: 100% qui tienne, on passe tout en
height: 100%;.
Donc,
height: 100% pour html, body, div#page, div#conteneurcontenu, div#contenu (dans cet enchaînement, je vois déjà deux blocs inutiles : div#page et div#conteneurcontenu...). The big problème, c'est que div#conteneurcontenu ne part pas du tout début de la page. Il prendra donc 100% de la hauteur, mais commencera à 40px du haut de la page.
La hauteur totale de la page :
- 20px de bordure en haut ;
- la hauter de div#entete, soit encore 20px ;
- div#conteneurcontenu, soit 100% de la hauteur de la fenêtre ;
- la hauteur de div#conteneurpieddepage (1.2em).
Soit au total : 100% + 40px + 1.2em.
Et quelles que soient les tailles de la fenêtre et de la police par défaut, 100% + 40px + 1.2em ça fera toujours plus que 100%. Donc ça ne marche pas.
Une solution possible : utiliser un div#conteneurcontenu en
height: 85%;... mais là on arrive à des choses aléatoires selon les résolutions, et pas vraiment satisfaisantes.
Arrivé à ce constat (que non, ça yen a pas possible), on peut dire deux choses :
Chose numéro 1 : arrêtez de penser le média web comme étant un machin contrôlable en hauteur, berdel de morde ! C'est pas contrôlable, c'est fait pour s'étirer, et même quand on y dit de pas s'étirer il s'étire tout seul. Faut être un peu maso pour perdre son temps à lutter contre la fatalité, alors qu'on pourrait accepter cet état de fait ET convertir le temps économisé en prise de tête sur des choses plus importantes.
Pour rappel, les designs fixes en hauteur, qui impliquent souvent l'utilisation d'un bloc avec barre de défilement interne : 1) sont peu fiables et requièrent souvent des bricolages et 2) posent des problèmes d'ergonomie et d'accessibilité, les barres de défilement internes étant moins fiables et ergonomiquement moins efficace que la barre de défilement globale de la fenêtre du navigateur.
Chose numéro 2 : si on veut vraiment faire ce genre de design, on évitera ces bidouillages peu fiables (bonjour la compatibilité avec les navigateurs... arrachages de cheveux en perspective), pour utiliser la solution qui marche bien et qui, bien utilisée,
ne pose pas de problème : un tableau de mise en page.
Car oui, les tableaux de mise en page ça n'est pas le diable, et ça n'est pas nécessairement synonyme de non-accessibilité. Donc, on fera un tableau à trois cellules (une par ligne), voire à quatre cellules (deux pour la ligne du milieu).
Je ne maitrise pas les tableaux (je les ai très peu pratiqués), mais je sais que c'est possible, et leur capacité à s'adapter en hauteur vaut le détour.
Donc un petit tableau de mise en page, sans mochetés comme des tableaux imbriqués ou cellules vides. Et avec ma bénédiction.
Ite, missa est.
