28172 sujets

CSS et mise en forme, CSS3

CSS overflow:auto et height en % ?

Bonjour,

Je cherche à faire une structure de site simple :

un header (en haut ^^)
un menu a gauche (toute la hauteur de l'écran)
le contenu à droite (toute la hauteur + overflow:auto)
un pied de page toujours collé en bas.

Et pour éviter la soucis de résolution :mettre les height et width en % et non en taille fixe.

Je n'arrive pas a faire apparaitre de scrollbar dans mon contenu de droite.

Si vous avez des idées, des tutos, etc je suis preneur

@+ Thegritch
thegritch a écrit :

Je n'arrive pas a faire apparaitre de scrollbar dans mon contenu de droite.

Comment ça? Une page en ligne ou au pire le code correspondant aiderait Smiley cligne
thegritch a écrit :
le contenu à droite (toute la hauteur + overflow:auto)

Bêtise ergonomique, à ne pas faire. C'est un double problème:
1. Les barres de défilement interne, ça dépanne à l'occasion, mais ça peut poser des problèmes d'accessibilité dans certains cas, et au niveau ergonomique c'est demander à l'utilisateur d'utiliser la barre de défilement d'un bloc précis au lieu d'utiliser celle, «normale», du navigateur.
2. Les contenus des header et footer sont-ils à ce point critiques qu'il faille absolument les avoir en toutes circonstances à l'écran? En général, un footer donne des informations accessoires, quand il n'est pas surtout esthétique. Un header est important car il permet d'identifier l'émetteur du site, mais une fois cette identification faite (une demi-seconde) l'utilisateur s'intéressera au contenu et préfèrera disposer de toute la hauteur disponible pour afficher les contenus (très important sur un portable widescreen, plus encore sur un ultraportable ou netbook).

Sinon techniquement ça se gère avec du positionnement absolu pour le menu et le contenu principal (en utilisant à la fois top et bottom), et ce n'est pas compatible IE6. Ou bien ça se gère avec du positionnement fixe (pour le header et footer), et ça n'est pas compatible IE6. La compatibilité IE6 est un détail cependant (on la gère en dégradation gracieuse et tout va bien), le critère de choix vraiment important sera ergonomique. Smiley cligne
Bonjour,

Je répond à la suite car je pense avoir peut être le même problème.

En gros: J'ai un bloc "container" qui m'enveloppe le tout, avec une hauteur à 95% et une largeur fixe. Dedans il y a en premier lieu le titre et le menu, ensuite un bloc "contents" (le contenu de la page, et j'aimerai lui coller un overflow:auto;
Après ça j'ai mon pied de page toujours positionner en bas de fenêtre.

En fait je m'embrouille avec cet overflow car c'est impossible de l'appliquer sans lui convenir height correct, si je fais height:inherit il me prendra la hauteur de page définit par "container", et en bidouillant un height:65% c'est trop hasardeux, le rendu sera toujours différent selon la définition de l'écran. Au final, le bloc "contents" déborde toujours en bas par dessus mon footer et mon container.

J'ai un peu du mal à formuler ce que je veux dire, mais j'espère que vous m'avez compris dans les grandes lignes. Si quelqu'un à une solution à ce problème je suis preneur, même si c'est pas 100% ergonomique, j'aimerai avoir la solution à ce problème, pour être capable de le résoudre dans le futur.

Les quelques morceaux de code importants en commençant par le HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <!-- header -->
</head>
  <body>
    <div id="container">
      <!-- titre + menu -->
      <div id="content"><!-- Contenu --></div>
      <p id="footer"><!-- footer --></p>
    </div>
  </body>
</html>


Et puis le CSS :

body
{
  margin:0;
}
html,body 
{
  height: 100%;
}
div#container
{
  top:2%;
  height:95%;
  position:relative;
  width:900px;
  margin:0 auto;
}
div#content 
{ 
  height:auto;
  bottom:0;
  overflow:auto;
  padding:0 30px 50px 30px;
}
p#footer
{
  margin:0;
  padding:0;
  line-height:35px;
  position:absolute;
  width:100%;
  bottom:0;
}
Après avoir encore une fois tout retourné dans tous les sens j'y suis arrivé avec ta méthode Florent (je l'avais pas bien comprise au départ).

Ce qui me donne en modif CSS :

div#content 
{ 
  height:auto;
  position:absolute;
  top:180px;
  bottom:70px;
  overflow:auto;
  padding:0 30px 50px 30px;
}


Le problème comme tu l'as soulevé c'est que c'est incompatible avec IE6. Mais je ne comprend pas ce que tu veux dire par "dégradation gracieuse", je n'en connais pas la définition...
Bonjour,

Je remonte le sujet pour vous demander une définition correct du terme "dégradation gracieuse", je n'ai rien trouvé de concluant sur le web. Et j'avoue être un peu dans l'impasse avec IE6, la seule façon à mes yeux de remédier à ce problème c'est d'abandonner soit l'overflow ou soit les dimensions en pourcentage dans une feuille de style spécifique à IE6 (grâce aux commentaires conditionnels). Qu'en pensez vous?

Cédric R.
Sujet clos
Aller à