numéro de barre de défilement dans Google Chrome

Question

J'ai la structure HTML suivant

<div style="overflow-x:auto;overflow-y:hidden;position:relative"> 
     <div style="position:absolute; top:0;bottom:0;padding-top:30px"> 
     </div> 
</div> 

Lorsque la div intérieure se développe la barre extérieure reçoit ses barres de défilement. Mais les barres de défilement apparaissent sur le div interne (en bloquant son contenu). Fonctionne bien dans Firefox et IE.

J'ai besoin que la division interne soit positionnée absolument.

Quelqu'un aide s'il vous plaît ..

Answer 1

La barre de défilement est ajouté au sein de ladiv, pas au-dessous, donc le contenu de votre page ne sera pas poussé vers le bas ou latéralement chaque fois qu'un div montre des barres de défilement. Donc, si vous définissez la hauteur de l'extérieur div à 100px, ce sera 100px avec ou sans les barres de défilement.

Je n'ai pas IE ici pour tester, mais je ne vois pas de différence de taille dans Chrome, Safari ou Firefox. Il y a une différence cependant. Chrome et Safari ne redimensionnent pas l'extérieur div. Il fait toujours 100px de hauteur, mais en bas, la barre de défilement est superposée. Dans Firefox cependant, le div externe est redimensionné à 100px - la hauteur de la barre de défilement. Donc, le div est maintenant, disons, 90px, et la barre de défilement 10px est ajoutée ci-dessous.

Vous ne pouvez pas faire grand-chose à ce sujet; juste la façon dont les navigateurs ont décidé d'afficher des choses comme ça. Si vous voulez montrer plus de contenu, ajoutez un peu de remplissage ou changez la taille (s).