2012-12-18 3 views
0

Je voudrais utiliser une barre de défilement sur un div en utilisant le dépassement de propriété: auto et overflow: masqué sur le corps. Cela fonctionne bien avec Chrome mais pas avec Firefox et IE.Comment afficher la barre de défilement dans Firefox et IE?

Quelqu'un peut-il m'expliquer pourquoi il y a 2 comportements différents avec ce code?

<html lang="en" class="fillScreen" dir="ltr"><head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <meta content="IE=edge" http-equiv="X-UA-Compatible"> 



    <link rel="stylesheet" href="template4.css" type="text/css"> 

    <style> 

     .fillScreen { 
      bottom:0px; 
      height:100%; 
     } 

     html, body { 
      margin: 0; padding: 0; 
      height: 100%; 
      overflow: hidden; 
     } 


    </style> 

    </head> 

    <body class="fillScreen"> 

    <div class="fillScreen" style="display:table;width:100%"> 

     <div class="fillScreen" style="display:table-row"> 

      <div style="border: solid 2px red;overflow:auto;display:table-cell;overflow:auto" class="fillScreen" >    

        <div class="fillScreen" style="display:table;width:100%;overflow:auto">    

         <div class="fillScreen" style="border: solid 1px blue;" style="display:table-row">    

          <div class="fillScreen" style="display:table-cell">    
           <div class="fillScreen" style="position:relative"> 

            <button width="142px" height="20px" style="position:absolute;top:99px;left:20px;">OK</button> 

           </div> 
          </div>   

         </div> 

        </div> 

      </div> 
     </div> 

    </div> 

</body> 
</html> 

Il est possible de le tester ici http://jsfiddle.net/nMSvv/2/ Scrollbar apears dans Chrome lors du redimensionnement de la fenêtre.

ajouter, que je dois absolument afficher le bouton avec la position absolue et la nécessité de maintenir cette structure de div

Merci pour toute aide

+2

Je ne vois aucune barre de défilement lors du redimensionnement de même en chrome –

+1

Sa moi ici, Chrome 23 sur Windows n'a pas de barre de défilement comme FF. – mikel

Répondre

0

Solution est ici: http://jsfiddle.net/nMSvv/3/

je avais besoin pour envelopper le div où je veux une barre de défilement avec:

<div class="fillScreen" style="position:relative;overflow:auto">    
    <div style="position:absolute;top:0px;left:0px"> 

    </div> 
</div> 
Questions connexes