Scrollbar dans une div à hauteur variable

Bonjour bonjour,

J'ai une div de hauteur maximale (100%)
Dans cette div je voudrais placer une liste avec un header fixe et un contenu qui scroll si celui-ci dépasse la hauteur de la div.

Voici le CSS:

html, body { height: 100%; width: 100%; padding: 0; margin: 0; overflow:hidden;}
#contentContainer{
width: auto ; height:100%; overflow: auto ;
}
 

Et le HTML:

<div>
  <div id="listHeader">le header de la liste</div>
  <div id="contentContainer">
    Le contenu variable de la liste.
  </div>
</div>
 

Le problème est que si l'on réduit la fenêtre du navigateur, le scroll n'apparait que bien longtemps après que les lignes les plus basses aient été cachées.
Si je "joue" avec la hauteur (90%/95%...) cela règle en partie le problème mais cela ne m'apparait pas comme ne solution adéquate.

Sur les forums je ne trouvent que des réponses pour des hauteurs fixes
Quelqu'un aurait-il abordé ce problème?

Je pense que c'est lié au fait que tu ne recharges pas ta page, et que du coup, le navigateur conserve la hauteur "100%" comme étant l'état initial d'affichage.
Refais le test en actualisant ta page après réduction de la hauteur, ca devrait fonctionner (il est rare qu'un utilisateur s'amuse à modifier la hauteur de fenetre de son navigateur en cours de navigation... il me semble donc que ton problème est un "non problème")

Sinon, il faudra sans doute t'orienter vers javascript, pour actualiser les propriétés "en live".
Modifié par Gryzzly (05 Jun 2009 - 03:35)