Css pour div 100% hauteur etdiv "retractable"

bonjour ,

j'aimerais faire cette présentation, mais j'ai quelques soucis en CSS :



le 1 (entete de toutes mes pages) doit être en position fixe toujours en haut
le 2 (pied) doit aussi être en position fixe en bas de l'écran

les 3 4 5 6 7 8 sont affichables ou non en cliquant sur des + / - pour les afficher ou non via des display block ou none

et le 9 contenant mon corps de page en fonction des différents menus cliqués, doit s'adapter au plus grand en largeur et en hauteur suivant si les div 3 4 5 6 7 et 8 sont affichées ou non.
l'ascenseur doit donc tenir compte de cette place disponible.



et ce, quelque soit la taille/résolution de l'écran, et aussi si on redimensionne la fenêtre.

j'aimerais aussi, bien sûr, que ce soit aussi un maximum compatible avec les différentes versions des navigateurs.


je n'arrive pas à faire en sorte que le 9 ait son ascenseur et que 5 6 7 8 ne se décalent donc pas.
et si je met 3 et 4 en float left, ils ne descendent pas jusqu'en bas de l'écran.

j'espère que j'ai été claire dans mes explications.
Merci d'avance pour vos réponses !

WickedWitch a écrit :
bonjour ,

j'aimerais faire cette présentation, mais j'ai quelques soucis en CSS :

upload/47556-presentati.jpg

le 1 (entete de toutes mes pages) doit être en position fixe toujours en haut
le 2 (pied) doit aussi être en position fixe en bas de l'écran

les 3 4 5 6 7 8 sont affichables ou non en cliquant sur des + / - pour les afficher ou non via des display block ou none

et le 9 contenant mon corps de page en fonction des différents menus cliqués, doit s'adapter au plus grand en largeur et en hauteur suivant si les div 3 4 5 6 7 et 8 sont affichées ou non.
l'ascenseur doit donc tenir compte de cette place disponible.



et ce, quelque soit la taille/résolution de l'écran, et aussi si on redimensionne la fenêtre.

j'aimerais aussi, bien sûr, que ce soit aussi un maximum compatible avec les différentes versions des navigateurs.


je n'arrive pas à faire en sorte que le 9 ait son ascenseur et que 5 6 7 8 ne se décalent donc pas.
et si je met 3 et 4 en float left, ils ne descendent pas jusqu'en bas de l'écran.

j'espère que j'ai été claire dans mes explications.
Merci d'avance pour vos réponses !

Un bout de code ou une page en ligne, ça serait sympa pour ceux qui voudront te répondre.

Bonjour,

pour le pied de page j'ai trouvé ma solution car je souhaitais le coller en bas de page.

Sur ce post il y a au moins trois possibilités.

Bon courage.

http://forum.alsacreations.com/topic-2-65130-1-Coller-le-footer-en-bas-de-page.html

Bonjour,

d'après tes indications tu devrais étudier les display:table, table-cell etc... Ça ne fonctionne pas sur IE7 (!) mais ça te permettrait d'obtenir relativement facilement le résultat que tu décris.

Un petit tour sur le labo de Raphaël Goetter t'en apprendra plus, si ça t'intéresse !

j'aurais bien voulu vous donner un bout de code, mais justement je n'ai rien de concret, car j'ai essayé pleins de moyen différents, même avec des table, ce qui n'est pas propre.
je ne peux pas vous donner ce que j'ai actuellement, je vais essayer de faire un extrait plus léger pour être plus explicite

@ Ten, j'avais essayé avec les display table et table cell etc... mais j'avais vu que certains IE n'aimaient pas trop
en tout cas merci

WickedWitch a écrit :
j'avais essayé avec les display table et table cell etc... mais j'avais vu que certains IE n'aimaient pas trop

Oui enfin, ce n'est pas compatible avec IE > 8 ; des versions plus qu'obsolètes aujourd'hui (moins d'1% du marché, sauf en Chine et, curieusement, au Japon), pour lesquelles même Google et consorts se dispensent de garder la rétrocompatibilité sur leur applications...

Alors ne soyons pas plus royalistes que le roi.

+1 pour @Olivier C.
Table-cell m'a tellement conquis (merci Raphaël) que je crée un site en utilisant cette propriété fréquemment.
Modifié par rodolpheb (27 Dec 2012 - 09:30)