28172 sujets

CSS et mise en forme, CSS3

Gestion des scrollbar différentes sous IE et FF

Bonjour à tous,

Je vous expose mon problème. J'ai une box (un div en l'occurrence) qui contient un enfant dont la taille est 100% (une table ou un autre div). Si jamais la hauteur de cet enfant dépasse la hauteur du parent, alors une scrollbar vertical apparaît. Jusque là rien d'étonnement (j'ai mis l'overflow à auto).

Mon problème vient de la différence de réactions entre IE et FF (je ne sais pas lequel à raison et lequel à tort). Quand FF fait apparaître une scrollbar vertical, la taille effective de la boîte est diminué, donc tout reste visible dans la box parente. Quant à IE, il fait apparaître cette scrollbar par dessus la box, et par conséquent le contenu passe en partie en dessous de la barre. Du coup une scrollbar horizontale apparaît (ce qui est logique je vous l'accorde).

Quelqu'un a une explication? Et surtout une méthode pour éviter cette différence de traitement?

Une petite image pour illustrer mon propos (le padding de la deuxième box est fais pour bien voir ce qu'il se passe, mais il n'influe pas sur la chose)

http://fallengalaxy.com/~fedaykin/scrollbar.png

Merci
Salut,

Merci de ta proposition mais 95% ça va si 5%<17px (la taille de la scroll vertical je crois) donc c'est variable. Or ma box parente est de taille variable (je travaille sur un framework RIA) donc possiblement de 100px de large. Ca veut dire le mettre à 83% pour parer à ce cas. Or ma box peut aussi faire 1200px... ça veut dire un trou de 204px à droite, ce qui n'est pas envisageable.

Pas d'autres idées?
re moi;

essaie ça si cela te convient ?


<html>
<head>
<style type ="text/css">

.scroll {overflow:auto;
         width: 50%;
	 height: 50%;
	 border: 1px black solid;
	}

.donnees { width: auto; /* aprés correction */
	   height: auto;
	   border: 1px dotted red;
	 }

</style>


</head>
<body>

<div class="scroll">
   <div class="donnees">
   </div>
</div>

</body>
</html>

Modifié par flattazor (26 Feb 2009 - 19:48)
Bonjour,

J'ai eu ma réponse sur une mailing list css. La solution à ma question est la suivante :

a écrit :
Remove the 'width:100%' and leave the default 'display:block' and 'width:auto' on the div. This will automatically make room for the scrollbar on the outer div.

If you need to use a table, wrap the table in a div and set the table's width to 100%, but leave the wrapper div width at auto.


<div style='border:1px solid black;height:200px;overflow:auto;'>
 <div style='height:150%;'><!-- Do not set width! -->
   <p>Content here will scroll...</p>
 </div>
</div>
<div style='border:1px solid black;height:200px;overflow:auto;'>
 <div style='height:150%;'><!-- Do not set width! -->
   <table style='width:100%;'>
     <tbody>
       <tr>
         <td>Content here will scroll...</td>
       </tr>
     </tbody>
   </table>
 </div>
</div>


La solution est donc d'utiliser width:auto à la place de 100%
Sujet clos
Aller à