Un fond de menu sur toute la hauteur

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
olab
Varan
Messages : 1254
Inscription : 30 juil. 2003, 20:20

Un fond de menu sur toute la hauteur

Message par olab »

Bonjour à tous.

J'ai réalisé un div de menu, qui se trouve à la fin de mon fichier xhtml, et je lui ai donné une hauteur de 100% pour que son fond soit visible sur toute la hauteur (après je place diverses boites dedans). Le hic c'est que dès qu'on scrolle, et ben on se rend compte que le height ne concerne que la zone affichée lors du rendu de la page, et on voit une coupure :-(
Est-ce que quelqu'un aurait une idée pour solutionner ça ?
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

Il est placé comment ton menu ? Flottant ou position absolue ? Peut-être qu'il te suffit d'ajouter un <div> conteneur autour.
Monique
Lézard à collerette
Messages : 476
Inscription : 05 janv. 2004, 23:21

Message par Monique »

Bonjour,

La solution proposée sur A List Apart, Faux Columns ne te conviendrait-elle pas ?
C'est prévu pour un bloc en position absolue.
Amicalement,
Monique
Mozilla-Belgium | OpenWeb | Opquast
olab
Varan
Messages : 1254
Inscription : 30 juil. 2003, 20:20

Message par olab »

La soluce du background de faux columns, histoire de tricher, c'est pas vraiment très réglo :-)
Mon menu est en absolute, et il est contenu dans un div main qui fait tout le body (benoit, va voir la page de la nouvelle UI, c'est de ça que je parle, il s'agit de la partie grise qui ne va pas jusqu'en bas quand il y a une scrollbar)
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

olab a écrit :La soluce du background de faux columns, histoire de tricher, c'est pas vraiment très réglo :-)
Mon menu est en absolute, et il est contenu dans un div main qui fait tout le body (benoit, va voir la page de la nouvelle UI, c'est de ça que je parle, il s'agit de la partie grise qui ne va pas jusqu'en bas quand il y a une scrollbar)
Bon je crois que j'ai trouvé un truc sans mettre d'image (les couleurs sont fictives, j'ai fait ça avec le bookmarklet test styles et le DOM inspector, mais tu verras vite ce qu'il faut changer ;))

Code : Tout sélectionner

body {background-color:lightgray;}
#main {background-color:white; border-left:1px solid black; margin-left:13em;}
Il reste un décalage en trop sur le contenu alors mais j'espère que tu trouveras comment l'enlever.
olab
Varan
Messages : 1254
Inscription : 30 juil. 2003, 20:20

Message par olab »

Merci, ça s'en approche. Par contre je pige pas, le div main, il devrait prendre toute la place du body non ? Là c'est louche tu mets un border: 1px solid red le main va jusqu'en bas, et si tu mets juste border-left, ya une bande grise en bas ! Comportement bizarre je trouve...
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités