Bonjour,
 
Je rencontre un soucis dans la mise en page de mon site :
 
Je dispose de 3 blocs DIV les uns en dessous des autres
Le premier (entete) contient une image de hauteur fixe (100px)
Le second (corps) 3 autres blocs DIV les uns à gauches des autres
 - left
 - centre
 - droite
Le dernier (footer) une autre image de hauteur fixe (15px)
 
Je voudrais savoir si il est possible que mon bloc de corps puisse prendre toute la hauteur qu'il lui reste et que si le contenu d'un des 3 blocs intérieures dépasse cette hauteur un ascenseur vertical s'affiche sur ce bloc interrieur.
 
J'en suis arrivé à bien disposer mes blocs mais seulement avec une hauteur définie pour mon corps et centre (le seul bloc qui risque de déborder)
 
Mon code HTML :

 
Le CSS

 
J'ai essayé de mettre la hauteur à 100% pour le corps, BODY et HTML sans succès...
 
Need help please.

J'ai pas vraiment compris ce que tu cherchais...

1) Pour que ta div "corps" prenne bien en compte l'encombrement de ses div qu'elle contient, il faut que tu mettes une 4ème div (après right) :
<div style="clear:both"></div>...
(par defaut, une div affiche son contenu qui est en float mais "ignore" leur encombrement (vu qu'ils sont en float...))
Il faut donc mettre un factice qui sera prit en compte par ce parent, mais qui ignore le float de ces frères, d'où l'utilisation de cette 4eme div...

2) Libre à toi de définir la taille de ton "corps" maintenant qu'elle connait l'encombrement de son contenu... Si tu ne met rien, elle s'adaptera, si tu lui impose, tu peux faire un overflow:scroll pour être sure de pouvoir tout atteindre avec un scroll (ou ascenseur comme tu dis)...

Pour être un peu plus clair :
En fait je ne veux pas que ma div "corps" prennent en compte l'encombrement de ses fils mais que ma div "corps" (et ces fils) prenne la place (la hauteur) qui lui reste entre ma div "entete" (qui est tout en haut) et "footer" (qui est tout en bas de la page visible sans scroll) (et que les fils aient un scroll si la hauteur ne suffit pas).
 
dans tout les cas je vais tenté la 4ème div invisible.

Dans tous les cas, tu dois faire mon 1)...  
Sinon, tes float pourront dépasser sur ton footer...
 
Vu qu'en div, on ne peut pas mélanger % et px pour découper l'espace, j'ai bien peur que tu doives passer par JS (mettre en page par rapport à la taille de la fenêtre coté client)... (enfin, juste pour declarer la taille de "corps", qu'il faudra nommé par ID et non par class, pour plus de simplicité d'accès par JS)

Sinon, tu envisage la possibilité de perdre de l'espace, en mettant la taille du corps en pourcentage, à 70% par exemple, à toi de jouer pour trouvé une valeur, qui additioné à la taille en pixel de la bannière + footer ne soit pas supérieur à la taille de la fenêtre...

Ok, merci.
 
Pour le premier post :
Même avec JS, je sais déterminer la résolution de l'écran mais comment savoir la taille que prend le navigateur dans le haut (Barre d'adresse, menu, onglet... ) ?
Pour faire taille corps = hauteur de la résolution - hauteur du navigateur - hauteur d'entete - hauteur footer.
 
 
Pour le second :
Pour moi et dans mon cas autant mettre une hauteur en dur, 70% ne va pas représenter la même chose suivant la résolution...

Non, bien entendu, il ne faut pas se baser sur la resolution, mais bien de la taille de la fenetre "active".
Comment ? l'astuce est de placer un élément qui fait une hauteur de 100% en CSS (une div masqué par exemple) et de recupérer via JS, sa hauteur en px...
=> Un link magique !
 
Sinon, j'ai une soluce pur HTML/CSS en tête (quand on me lance des défis, on me trouve), j'essayerais quand j'aurais le temps

Comme ça je vois mieux. J'implémenterai le JS ce soir mais si ta soluce HTML/CSS fonctionne je suis preneur.
 
Encore merci.

Bon bah, ça marche pas, le centre est bien comme il faut, mais le scroll est aussi grand que la fenêtre (même si il agit bien sur le corp seulement...)

Sinon, avec JS, j'arrive à ça :
http://urfman.free.fr/fhw/testFullHeight.html

Impec, merci beaucoup.

J'ai mis ton script en place et je voulais dans le JS prendre la taille de l'entete et du footer au lieu de soustraire en dur :

Si je decommente les alert, la popup affiche "undefined".

Pourquoi ça ne marche pas alors que pour le div invisible de toute la hauteur ça marche ?

J'ai triché en allant chercher la taille des images en entete et footer, mais j'aurais voulue savoir...

Sinon pour voir ce que ça rend : http://r17734.ovh.net/CrazyDuck/index.php?page=news

J'ai moi même été dans l'impossibilité de recupérer la taille d'une Div par exemple, seul le "height" d'une image m'est retourné... le css est traçable seulement quand il est déclaré lui même par JS...

Pour l'aperçu, il faut un footeur plus grand en hauteur, car le contenu fait déborder, et donc donne un scroll... (je suppose que c'est pour ça que soustraire "en dure" te gêne...)
T'as un scroll horizontale sur ton div de login qui me perturbe amèrement ! j'en ai des frissons dans le dos...
Bon c'est froid tout ça quand même !

J'avais zapper que tu prenais aussi la taille de l'image pour le div invisible.
 
J'ai seulement testé avec Firefox sous Linux hier et ça s'afficher bien. Ce matin au bureau je lance IE et c'est le drame, sur FF ça passe encore à part le scroll du login et le footer trop petit.
 
Pour le scroll de la partie droite, j'ai dû mal me démerder avec les marges droite, gauche et la taille du centre.
 

Moi j'ai ça sous FF 3.0.8 sur PC aussi, logique d'ailleur, ton footer a 15px de haut, mais son contenu l'agrandi...
Sinon, je ne prend aucune taille de div, je ne prend que celle de l'image (dont je n'ai jamais eu la source entre nous)

Sniff sur IE ça marchait toujours pas... L'entete et le footer sont aligné sur la droite du cadre central le plus à droite, alors que sur FF windows et Linux, no soucis...
 
Il fallait rajouter dans la CSS pour l'entête et le footer :

 
Comme pour le div de l'image invisible.

Par contre pourquoi l'évènement ONRESIZE est considéré comme invalide par le validateur de la W3C ???

Je sais plus, je l'avais lu, mais je trouve ça dommage... et je comprend pas trop

je repasse tout à l'heure sur ton post, j'ai ta solution à la maison. J'ai eu exactement le même problème quand j'ai développer mon site, j'ai galérer mais j'ai trouvé (sans javascript ni bordel incompatible w3c) alors je me suis fais un canevas que j'utilise maintenant à chaque fois que je me fais un site.
 
Bon à toute je te post ça tout à l'heure  
 
 

Merci, ça m'interresse !

re
 
voilà, j'espère que c'est ce que tu cherche à faire (bon dans mon canevas il y a que deux colonnes pas 3 mais le principe est le même si j'ai suivi ce que tu cherches à faire)
 
index.php

 
design.css

J'ai essayé vite fait, mais cela ne convient pas à ce que je veux faire, en gros dans ton exemple les 2 colonnes ne change pas de taille suivant la résolution de l'utilisateur ou le redimensionnement de la page...

En tout cas merci.

il n'y a pas que ça, c'est que rien qu'à voir le code, ça ne repond pas au contraintes de NaMoUr...
Seule une TABLE donnerait le même résultat sans JS ...

Ce dont j'était partit à la base... Mais on ma dit "hoouuuu les tables pour la mise en page c'est le MAL...." depuis je galère à tout transposer avec des DIV... et il faut avouer que ça donne un code plus clair.
 

Oui, moi même étant graphiste de base, j'ai eu du mal à me debarasser des Tables... Mais depuis, je me régale !
Je pense que tu devrais te debarasser de cette contrainte (sauf si le JS te convient) plutôt que d'essayer de la respecter à tout prix... surtout qu'elle n'as pas grand intérêt...
Je me serai contenté en guise de footer, d'une div qui survolait le contenu du corps, scotché en bas, un peu comme la footbar de facebook...
ça aurait été plus simple que de contraindre la taille du corps en fonction de ce dernier !