28172 sujets

CSS et mise en forme, CSS3

[CSS] Dimensionner un conteneur à la taille de l'écran

Bonjour,

Je suis en train de tenter de dimensionner un conteneur à la taille de l'écran. L'idée est de diviser la place offerte par l'écran en trois lignes.

La première ligne Header à une hauteur fixe de n pixels.
La troisième ligne Footer à une hauteur fixe de m pixels.

Je souhaiterai que la seconde, au milieu donc, prenne la place restante.

J'ai tenté ça en exploitant un tableau, sans succès.

CSS :
body
{
  margin:0px;
  padding:0px;
  border:0px;
  background-color:#FFFFFF;             
}
                
table
{
  border:1px solid #000000;
  height:100%;          
}
 
td#Header
{
  height:30px;
}
                  
td#FTP
{
  height:100%;
}
                  
td#Footer
{
  height:30px;
}


xHTML :
<!-- [...] -->
  <body>
    <table>
      <tr><td id="Header">a</td></tr>
      <tr><td id="FTP">b</td></tr>
      <tr><td id="Footer">c</td></tr>   
    </table>
  </body>
<!-- [...] -->


Alors, est-ce possible autrement ?

Merci Smiley smile
Modifié par jordan (13 Feb 2008 - 17:46)
Hum, en fait, ça fonctionne, mais je ne peux pas ajouter d'ascenseur au bloc du milieu, vu qu'il n'a pas de taille fixe (via overflow:scroll).

Je cherche à faire ça :
http://tchater.free.fr/ascenseur.png

Ce qui n'est pas vraiment ce que propose le tutorial bien qu'il résout une partie du problème.
jordan a écrit :
Je cherche à faire ça :
http://tchater.free.fr/ascenseur.png

Alors techniquement c'est assez simple: il suffit que le bloc central ait une hauteur fixe, et un overflow: auto, et roulez jeunesse!

Après quoi, on se rendra sans doute compte qu'on a un problème ergonomique important. Disons que j'ai donné une hauteur de 500px à mon bloc central. Pour les utilisateurs en 800x600, il sera difficile de voir le bloc central dans son entier. Pour les utilisateurs en 1024x768, le bloc central sera peut-être visible, mais on aura probablement deux barres de défilement: la barre de défilement globale de la page, et la barre de défilement du bloc central. Ça risque de perturber l'utilisateur, surtout que le comportement des navigateurs dans ce cas n'est pas toujours très simple à appréhender. Par exemple, la molette de la souris actionne la barre de défilement globale si le pointeur n'est pas sur le bloc central, puis la barre de défilement du bloc central si le pointeur est dessus, puis à nouveau la barre globale quand on arrive à la fin du bloc central.

Bref, on voudra éviter cette situation autant que possible.

On voudra alors peut-être avoir le rendu suivant: l'en-tête est fixe en haut de fenêtre, le pied de page est fixe en bas de fenêtre, et le bloc central prend tout l'espace restant, et possède une barre de défilement si son contenu le demande.

Fort bien. Sauf qu'il n'y a pas de moyen fiable pour faire ceci dans Internet Explorer 6.

Et même si on trouve le moyen de le faire (par exemple en utilisant le positinnement absolu pour les navigateurs modernes et un correctif en Javascript pour IE6), il nous reste un problème ergonomique: le contenu (ce qui intéresse le visiteur) est confiné à une zone réduite en hauteur. Cela peut être source d'inconfort pour le lecteur.

Voilà pourquoi les professionnels évitent ce genre de design, sauf cas particulier.
Sujet clos
Aller à