La mise en page du cadre css ne fonctionne pas correctement dans IE 6 et au-dessus

Question

J'essaie de créer une mise en page CSS en utilisant DIVs pour émuler des cadres.

Je veux un volet supérieur fixe qui a une hauteur fixe et la largeur s'étire et se rétracte lorsque la page est redimensionnée. (signification fixe si l'utilisateur fait défiler la page, le volet supérieur est toujours visible)

Ci-dessous, je veux deux colonnes. La colonne de gauche a une largeur fixe et la colonne de droite s'étend en largeur lorsque vous redimensionnez la fenêtre. Les deux colonnes doivent avoir des barres de défilement verticales si nécessaire.

Mon code semble fonctionner correctement dans Chrome, mais dans IE, les barres de défilement n'apparaissent pas dans les colonnes de gauche ou de droite.

Y at-il quelque chose que je peux faire pour résoudre ce problème? Peut-être un peu de javascript pour dire à IE de dessiner les barres de défilement correctement?

style:

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

#framecontentTop{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 108px; /*Height of frame div*/ 
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
    background-color: navy; 
    color: white; 
} 

#framecontent{ 
    position: absolute; 
    top: 108px; 
    left: 0px; 
    bottom: 0px;  
    width: 200px; /*Width of frame div*/ 
    float:right; 
    overflow: auto; /*Disable scrollbars. Set to "scroll" to enable*/ 
    background: navy; 
    color: white; 
    /*padding: 108px 0 0 200px; */ /*Set value to (0 0 0 WidthOfFrameDiv)*/ 
} 


#maincontent{ 
    position: absolute; 
    top: 108px; 
    left: 200px; /*Set left value to WidthOfFrameDiv*/ 
    right: 0px; 
    bottom: 0px; 
    float:right; 
    overflow: auto; 
    background: #fff; 
} 


* html body { /*IE6 hack*/ 

} 


* html #maincontent{ /*IE6 hack*/ 
    height: 100%; 
    width: 100%; 
} 

Script:

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

corps html:

<div id="framecontentTop"> 
<h1>CSS Top Frame Layout</h1> 
<h3>Sample text here</h3> 
</div> 


<div id="framecontent"> 
<h1>CSS Left Frame Layout</h1> 
<p><script type="text/javascript">filltext(25)</script></p> 
</div> 


<div id="maincontent"> 
<h1>Dynamic Drive CSS Library</h1> 
<p><script type="text/javascript">filltext(255)</script></p> 
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p> 
</div> 


</body> 
</html> 

Answer 1

Vous devez définir des hauteurs sur les divs #mainContent et #framecontent ou ils ne seront jamais défiler, ils vont juste s'étirer pour s'adapter à leur contenu. Le% hauteur peut causer des problèmes pour IE, et il peut provoquer des résultats inattendus (dans mon humble expérience). Avez-vous essayé de supprimer l'IE seulement CSS?

De même, pour corriger un commentaire dans votre CSS, débordement: auto ne désactive pas les barres de défilement. Il les cache quand ils ne sont pas nécessaires et les montre quand ils le sont.