Bonjour,
 
Je galère comme un mort pour faire un truc qui me parait pourtant simple. Je souhaite réaliser une page Web avec une entête, un pied de page, et entre les deux une zone de texte.
 
Je souhaite également que l'entête et le pied de page soient toujours visible, qu'il n'y ait pas de barre de scroll sur le navigateur et que la zone de texte scroll pour afficher le contenu. De même, je souhaite que la zone de texte s'adapte automatiquement à la hauteur du navigateur, de telle manière qu'on affiche toujours un maximum d'info.
 
J'ai essayé un max de choses avec les blocs CSS, en position absolute ou relative, avec de l'overflow auto, en utilisant les propriétés top ou bottom, mais rien à faire ça ne fonctionne pas ou en tout cas pas sur tous les névigateurs (évidemment à chaque fois c'est IE qui fout la panique).
 
J'aimerais l'équivalent d'un TABLE à peu près foutu comme ça :
 
TR height 63px
TR height *, overflow auto
TR height 140
 
J'espère me faire comprendre à peu près
 
Merci d'avance si quelqu'un voit la solution, perso je sèche et ça fait des heures que j'y passe. Je suis quasiment certain de passer à côté d'un truc à la con qui va me mettre en colère quand je vais avoir la solution tellement c'était simple.

j'arrive pas a comprendre pourquoi tu veux cette mise en forme mais pourquoi pas
 
un truc bien crado mais qui fait ce que tu demandes (enfin pas sous ie evidemment)
http://jsfiddle.net/Bf65D/1/

enfin pas sous ie<8

Merci
 
Effectivement, ça se comporte pas mal sous Chrome et FF. Je n'ai qu'un IE7 sous la main et pas moyen de le mettre à jour (GPO de merde). Je testerai la compatibilité du code avec IE8 tout à l'heure. IE<8 ne semble représenter que 3 à 4% de part de marché en chute constante, donc au pire, soyanara IE6 et 7.
 
Merci encore.

Ça ne fonctionne pas sous IE8
 
Le placement des différents cadres ne se fait pas au bon endroits. Evidemment, sous FF et Chrome, ça se passe très bien.
 
Je pense que c'est mon code qui n'est pas nickel, j'ai testé pas mal de chose avec le code utilisé dans le lien plus haut. Ca vient peut être aussi du fait que je ne colle pas le code direct sur une page vierge, mais dans un autre cadre qui participe lui aussi à la mise en page du site.
 
En fait voila ce que je cherche à faire :

 
J'ai donc créé un cadre qui fait 100% en largeur et hauteur (vert clair).
Le cadre vert foncé en bas de page fait 140px, et 100% de largeur.
J'ai un nouveau cadre de 1000px de large et 100% de haut, centré, qui contient les cadres rouge et bleu.
Ce cadre est découpé en deux cadres (avec float dans CSS), le cadre rouge clair de 160px de large et 100% de haut, et un second qui contient les cadres rouge foncé et bleu.
La cadre rouge foncé fait 840px de large et 63px de haut.
Jusqu'à présent, tous les cadres dont j'ai parlé ne doivent pas scroller, et il ne faut pas de scroll sur le navigateur.
Arrive (enfin !) le cadre bleu. C'est la que le contenu vivant du site doit apparaître, et c'est lui qui doit avoir le scroll en overflow. Il fait 840px de large, doit être situé à 63px du haut et 140px du bas, et s'adapter pour remplir l'espace en fonction de ces contraintes.
 
Sous FF et Chrome, ça fonctionne. Sous IE, même en version 8, il ne fait pas ce que je souhaite, notamment le cadre bleu est placé beaucoup trop à droite et décalé par rapport au haut.
 
Si vous voyez comment corriger le problème ou une autre façon plus simple de mettre ça en place, je suis preneur, je suis en train d'y perdre mon latin (en plus de mon temps).
 
Merci d'avance.

Je vois que t'as fixer en "dur" des largeurs en px. Il se passe quoi avec des résolutions moins larges? Ne devrais-tu pas travailler plutôt avec des unités relatives comme les em ou les % pour avoir un design flottant en largeur ?

C'est effectivement ce que je préférerais, mais j'ai l'impression que dès qu'on met une largeur en %, l'overflow auto ne marche plus.
Si quelqu'un a une idée pour qu'en plus la zone "active" du site (les cadres rouges + le bleu) remplisse en largeur la fenêtre du navigateur (genre 80%) avec le cadre rouge clair en 160px et le cadre bleu plus le rouge foncé qui prennent le reste, je suis preneur, mais jusqu'à maintenant mes essais se sont soldés par des échecs.

un truc comme ça peut etre ?
http://jsfiddle.net/Y39Lj/9/

par contre comment ça doit se passer si ta page est plus longue que l'ecran ? le pied de page n'est pas visible ou il est poussé plus bas ?

edit : oups,  j'ai relu . Ma solution ne marche pas avec un scroll

une solution, à l'ancienne, tout en absolute http://jsfiddle.net/Y39Lj/25/
pas très élégant, mais fait le taf

Le dernier est pas mal du tout, mais il y a un truc que je ne comprends pas.

Sous IE8, sur le lien que tu m'as envoyé, tout fonctionne.

Avec mon code, qui est pourtant identique (il ne doit pas l'être du coup mais je comprends pas ce qui cloche), ça ne fonctionne pas (le scroll n'apparait pas et le cadre content dépasse en bas de page du coup).

comme je ne vois pas tonc ode, je pense pouvoir affirmer sans me tromper que l'erreur est ligne 42

Voici le code.

Le HTML :

Et le CSS :

J'ai épuré au maximum, pour n'avoir que le cadre qui m'intéresse le plus. J'ai essayé en mettant les autres (haut, gauche, bas, etc), mais le problème reste de toute façon le même, c'est ce cadre qui ne passe pas en overflow sous IE.

Un p'tit up au cas où quelqu'un voit ce que je n'arrive pas à voir moi même