D'où vient cette barre de défilement supplémentaire dans IE7?

J'ai une disposition CSS qui simule une page fixe, avec un en-tête et un menu de gauche, et un volet de contenu.D'où vient cette barre de défilement supplémentaire dans IE7?

Dans Firefox, cela fonctionne bien, mais dans Internet Explorer 7, il y a une barre de défilement supplémentaire sur le côté droit. Si vous déplacez la barre de défilement supplémentaire avec la souris, il ne défilera que l'en-tête en haut de la page. C'est presque comme si IE7 interprétait le height: 100% du menu de gauche comme la hauteur entière de la page, plutôt que la zone située sous l'en-tête.

Y at-il un moyen de résoudre ce problème?

Mon CSS:

body{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    overflow: hidden; 
    height: 100%; 
    max-height: 100%; 
} 

#framecontentTop { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    width: auto; 
    height: 100px; /*Height of top frame div*/ 
    overflow: hidden; /*Disable scrollbars.*/ 
    background-color: #90B3DC; 
    color: white; 
} 

#framecontentLeft { 
    position: absolute; 
    top: 100px; 
    left: 0; 
    bottom: 0; 
    width: 300px; /*Width of left frame div*/ 
    height: 100%; 
    overflow: hidden; /*Disable scrollbars.*/ 
    background-color: #90B3DC; 
    color: white; 
} 

#maincontent{ 
    position: fixed; 
    left: 300px; /*Set left value to WidthOfLeftFrameDiv*/ 
    top: 100px; /*Set top value to HeightOfTopFrameDiv*/ 
    right: 0; 
    bottom: 0; 
    overflow: auto; 
    background: #fff; 
} 

.innertube{ 
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/ 
}

Mon HTML:

<!DOCTYPE html> 
<html> 
<head> 
<title>CSS Left and Top Frames Layout</title> 
<link href="Frames.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript"> 
/*** Temporary text filler function. Remove when deploying template. ***/ 
var gibberish=["This is just some filler text", "Lorem ipsum dolor sit amet", "nothing to read here"] 
function filltext(words){ 
for (var i=0; i<words; i++) 
document.write(gibberish[Math.floor(Math.random()*3)]+" ") 
} 
</script> 

</head> 

<body> 
    <div id="framecontentLeft"> 
     <div class="innertube"> 
      <h3>Sample text here</h3> 
     </div> 
    </div> 

    <div id="framecontentTop"> 
     <div class="innertube"> 
      <h1>CSS Left and Top Frames Layout</h1> 
      <h3>Sample text here</h3> 
     </div> 
    </div> 

    <div id="maincontent"> 
     <div class="innertube"> 
      <h1>Content Title</h1> 
      <p><script type="text/javascript">filltext(255)</script></p> 
     </div> 
    </div> 
</body> 
</html>

Source

2009-11-06 Robert Harvey

IE7 interprète en effet 100% que la hauteur de pleine page. Ne pouvez-vous pas laisser le menu de gauche commencer en haut: 0px et laisser un padding-top de 100px?

De même, modifiez le menu de gauche à fixed à partir de absolute.

Source

2009-11-06 23:54:00

Ne fonctionne pas. C'est rembourrage comme prévu, mais la deuxième barre de défilement est toujours là, présentant le même comportement. –

Le rembourrage est maintenant à l'origine. On dirait que j'ai besoin de hauteur: 100% moins 100 pixels. –

Pouvez-vous poster un lien? –

D'où vient cette barre de défilement supplémentaire dans IE7?

Répondre

Questions connexes