Meilleure façon de gérer plusieurs colonnes de défilement

Question

Je suis en train de développer une application Web qui consiste visuellement en un en-tête au-dessus d'un corps contenant quatre colonnes de contenu de hauteur variable. Les dieux du design l'ont décrété comme étant de taille fixe, principalement parce que chacune des colonnes peut potentiellement devenir très longue, et donc (étant des concepteurs) ils veulent des iframes avec des barres de défilement indépendantes. Quatre barres de défilement (potentielles) sont assez mauvaises, mais si la hauteur globale de la page est fixée plus haut que la fenêtre du navigateur, elle se retrouvera avec cinq! La solution «normale» dans un cas comme celui-ci est bien sûr de fixer la hauteur globale de la page à quelque chose comme 700 pixels pour lui donner la «meilleure chance» de s'adapter verticalement, mais je ne veux pas J'espère que ce serait évident. Donc, ma question est la suivante: Quelle serait la meilleure façon d'avoir un conteneur de corps qui remplit l'espace disponible (espace vertical) avec chacune des colonnes faisant la même chose? Est-ce même pratique/possible? Question bonus: Puis-je utiliser de manière fiable la propriété CSS overflow pour les colonnes ou ai-je besoin d'iframes désagréables? J'ai beaucoup d'expérience en matière de CSS, mais pas du tout avec l'utilisation de dimensions en pourcentage (surtout si je les combine avec les dimensions en pixels dont j'ai besoin pour l'en-tête). En outre, cela doit être conforme aux normes et rétrocompatible avec IE6.

TIA.

EDIT: Je ne cherche pas une solution de mise en page CSS en soi, mon problème est de savoir comment répondre à la nécessité pour chaque colonne d'être la hauteur maximale possible dans le conteneur corps et défilement, sans fixer la hauteur du corps en pixels - sauf si j'en ai absolument besoin.

Answer 1

Je suis assez sûr que cela fait exactement ce dont vous avez besoin: Liquid 4 column layout with fixed height banner and footer

Pas iframes, pas de script java, et chaque colonne remplit automatiquement la hauteur disponible.

Answer 2

Parlez-vous de quelque chose comme ça?

<div id="head"></div> 
<div id="body"> 
    <div id="col1"></div> 
    <div id="col2"></div> 
    <div id="col3"></div> 
    <div id="col4"></div> 
</div> 

Le CSS

#body { position: absolute; top: 60px /* height of the header */; bottom: 0px; width: 100%; } 
#body div { position: absolute; top:0; bottom:0 ;width: 25% } 

Cela peut ne pas fonctionner dans IE6, pour lequel vous devez utiliser JavaScript:

window.onResize = function() { 
    // Calculate the height of the body, substract the height of the head and apply to all columns 
} 

Answer 3

En réponse à votre deuxième question, juste régler la hauteur propriété en CSS pour s'assurer que le contenu ne devient jamais plus grand que ce dont vous avez besoin. Vous pouvez utiliser overflow-y: scroll (CSS non valide mais fonctionne) pour forcer une barre de défilement sur un élément.

Answer 4

J'ai essayé diverses permutations de DIV éléments imbriqués les uns dans les autres, un ensemble à height:100% et l'autre padding:60px et je ne peux pas trouver un moyen d'obtenir une intérieure pour avoir une hauteur efficace à 100% -60px. Le problème est que les hauteurs de pourcentage se réfèrent à l'attribut height de l'élément conteneur, et non à la hauteur moins les marges et le remplissage. Soupir.

Je dois dire que je souhaite que le CSS permettait d'exprimer des hauteurs comme une somme (ou la différence) de pourcentage, font-relative, et des unités de pixels (comme dans

width: 12em - 2px; 
border: 1px solid #FED; /* Total width including border is 12em exactly */ 

ou

width: 25% - 1em; 
margin: 1.25em 1em; 

et ainsi de suite, comme TeX avec ses unités de fil).

Je pense que votre meilleur pari est probablement d'avoir du JavaScript qui examine la hauteur de la bannière et la soustrait de la hauteur de la fenêtre, puis définit la hauteur de la boîte contenant les colonnes de manière appropriée.Vous découvrirez alors quel écran de taille les concepteurs utilisent et définissez la valeur par défaut câblée dans le fichier CSS en fonction de leurs affichages.