Page 1 sur 2
Problèmes de blocs CSS "étirables" sous Firebird
Publié : 18 mars 2004, 18:12
par mikocyco
Bonjour a tous,
Je rencontre un problème avec ma page sous Firebird.
Cette page est composée d'un entête, d'un menu à gauche et du corps principal à droite, puis d'un pied de page. Cette page occupe 100% de la largeur et 100% de la hauteur de la fenêtre du navigateur.
Or quand le contenu du corps principal atteint la limite basse, ce même contenu déborde dans le pied et même en dessous, au lieu de "pousser" le corps principal. Voir ici :
http://champagne.fliniaux.free.fr/essai_page3.htm
Ce problème n'est pas rencontré sous IE.
A quoi est-ce du et comment peut-on le corriger ?
Merci et @+
Publié : 18 mars 2004, 18:42
par Nucleos
la solution se trouve dans la propriété css
overflow.
Publié : 18 mars 2004, 21:28
par mikocyco
Je ne pense que la propriété overflow puisse m'aider dans ce cas, car je ne souhaite ni rogner le contenu, ni faire apparaître une scrollbar pour atteindre le bas de la page.
Je souhaite que le bloc principal s'agrandisse en fonction du contenu, tout en ayant une hauteur mini égale à 100% de la hauteur de la fenêtre du navigateur.
Merci
Publié : 19 mars 2004, 11:29
par SIBELIUS
Publié : 19 mars 2004, 12:04
par Invité
Salut Sibelius,
Tu es décidément incoutournable en ce qui concerne les CSS.
J'avais bien lu tes conseils (ainsi que les liens associés) sur le forum de mediabox en réponse à ma question.
Mais ce qui m'embête, c'est que dans tous tes exemples, la seule page avec une hauteur fluide comporte un contenu scrollable.
Peut-on se passer de ce contenu scrollable, et obtenir un contenu étirable à l'écran ?
Merci et @+
Publié : 19 mars 2004, 12:06
par bobo
mikocyco a écrit :Je ne pense que la propriété overflow puisse m'aider dans ce cas, car je ne souhaite ni rogner le contenu, ni faire apparaître une scrollbar pour atteindre le bas de la page.
Je souhaite que le bloc principal s'agrandisse en fonction du contenu, tout en ayant une hauteur mini égale à 100% de la hauteur de la fenêtre du navigateur.
Dans ce cas là, il faudrait remplacer
Code : Tout sélectionner
#conteneur {
position: absolute;
width: 100%;
height: 100%;
background-image: url(Images/fond.gif);
}
par
Code : Tout sélectionner
#conteneur {
position: absolute;
width: 100%;
min-height: 100%;
background-image: url(Images/fond.gif);
}
Mais là, c'est IE qui va poser problème ! Car dans ton histoire, c'est IE qui est fautif au départ :
Via CSS tu imposes une hauteur fixe, mais IE agrandit quand même si ce n'est pas assez grand. C'est le comportement attendu de la propriété min-height, pas de la propriété height !
Mais IE ne comprend pas min-height et gère de travers height...
Publié : 19 mars 2004, 12:06
par SIBELIUS
Oui : tous les modèles sont étirables. Il suffit de leur donner une hauteur fluide si tu le désires
Publié : 19 mars 2004, 12:12
par Invité
Merci Bobo, ça marche nickel !
Et IE (du moins la version 6) semble gérer ce min-height, pas de problème à l'écran !!
Trop beau pour être vrai.
@+
Publié : 19 mars 2004, 12:15
par SIBELIUS
Euh non, IE ne comprend pas min-height
Une piste :
http://www.greywyvern.com/code/min-height-hack.html
Publié : 19 mars 2004, 12:27
par Invité
Et oui tu as raison, je pensais que ça marchait quand le contenu poussait le bloc. Mais sans contenu, je n'ai pas une hauteur de 100%.
Je vais donc étudier le lien que tu m'as donné.
Merci
Publié : 19 mars 2004, 12:42
par fredchat
http://www.projectseven.com/tutorials/c ... /index.htm
En passant, si tu comprend l'anglais, voici un article qui va te permettre d'enlever le javascript de ton menu.
Publié : 19 mars 2004, 12:45
par Invité
Merci Freed,
j'ai découvert hier la possibilité de gérer les images survolées sans javascript.
La "correction" est prévue.
Publié : 19 mars 2004, 16:43
par Invité
j'ai testé l'astuce de Sibelius. Ca marche bien pour des hauteurs fixes, mais je n'arrive à rien avec des hauteurs fluides.
J'ai créé deux pages simples, une avec un contenu court (
http://champagne.fliniaux.free.fr/contenu_court.html), une autre avec un contenu long (
http://champagne.fliniaux.free.fr/contenu_long.html), et ça ne va pas dans les deux cas.
Pourtant mon code me semble "logique".
Je commence à me demander si j'ai raison de m'entêter à travailler avec des hauteurs fluides tout en évitant des scrollbars autres que celles de la fenêtre du navigateur...
Publié : 19 mars 2004, 17:51
par calimo
Dans le contenu court, ta boîte "pied" est bien placée en bas, donc ça semble marcher.
Tu n'arrive pas à placer le "pied" dans "conteneur", et à mettre le "centre" à height:100% ?
Publié : 19 mars 2004, 18:19
par Invité
Calimo,
ta proposition marche bien pour le contenu court, le centre s'agrandit bien.
Par contre le problème revient quand le contenu devient trop grand.
Sinon j'ai testé ma page avec un centre scrollable (en suivant un des exemples donnés par Sibelius) et ça marche très bien (contenu court :
http://champagne.fliniaux.free.fr/scroll_court.html, et contenu long :
http://champagne.fliniaux.free.fr/scroll_long.html).
Ca m'embêterait de ne pas résoudre mon problème de base, mais la tentation des scrollbars est de plus en plus forte...
Merci et @+