Problèmes de blocs CSS "étirables" sous Firebird

[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 @+

[Nucleos]

la solution se trouve dans la propriété css overflow.

[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

[SIBELIUS]

Tu as le principe ici : http://www.alsacreations.com/articles/cellules/
Et tous les modèles ici sont "étirables" : http://www.alsacreations.com/articles/modeles/

Bonne chance

[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 @+

[bobo]

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...

[SIBELIUS]

Oui : tous les modèles sont étirables. Il suffit de leur donner une hauteur fluide si tu le désires

[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.

@+

[SIBELIUS]

Euh non, IE ne comprend pas min-height
Une piste : http://www.greywyvern.com/code/min-height-hack.html

[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

[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.

[Invité]

Merci Freed,

j'ai découvert hier la possibilité de gérer les images survolées sans javascript.
La "correction" est prévue.

[Invité]

Une piste : http://www.greywyvern.com/code/min-height-hack.html

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...

[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% ?

[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 @+