Pourquoi cet exemple CSS utilise-t-il "height: 1%" avec "overflow: auto"?

Je lis un livre HTML et CSS. Il a un exemple de code de disposition à deux colonnes.Pourquoi cet exemple CSS utilise-t-il "height: 1%" avec "overflow: auto"?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <style> 
     #main {height: 1%; overflow: auto;} 
     #main, #header, #footer {width: 768px; margin: auto;} 
     #bodycopy { float: right; width: 598px; } 
     #sidebar {margin-right: 608px; } 
     #footer {clear: both; } 
    </style> 
</head> 
<body> 
    <div id="header" style='background-color: #AAAAAA'>This is the header.</div> 
    <div id="main" style='background-color: #EEEEEE'> 
     <div id="bodycopy" style='background-color: #BBBBBB'> 
      This is the principal content.<br /> 
      This is the principal content.<br /> 
      This is the principal content.<br /> 
      This is the principal content.<br /> 
      This is the principal content.<br /> 
      This is the principal content.<br /> 
      This is the principal content.<br /> 
      This is the principal content.<br /> 
      This is the principal content.<br /> 
      This is the principal content.<br /> 
      This is the principal content.<br /> 
      This is the principal content.<br /> 
      This is the principal content.<br /> 
      This is the principal content.<br /> 
      This is the principal content.<br /> 
     </div> 
     <div id="sidebar" style='background-color: #CCCCCC'> 
      This is the sidebar. 
     </div> 
    </div> 
    <div id="footer" style='background-color: #DDDDDD'>This is the footer.</div> 
</body> 
</html>

L'auteur mentionne que l'utilisation de l'auto de trop-plein et 1% de la hauteur fera la zone principale d'élargir pour englober la hauteur calculée de contenu. J'essaie de supprimer la hauteur de 1% et essayé dans différents navigateurs, mais ils ne montrent pas de différence. Je suis assez confus de son utilisation. Une idée?

Source

2010-05-08 Lawrence Lau

Ceci est lié au bug hasLayout qui se manifeste dans IE6/7. Le height: 1% est l'un des correctifs les plus courants. Les autres étant zoom: 1; (qui ne valide pas en CSS) et overflow: auto;.

Ainsi, si vous supprimez les deuxheight: 1%; et overflow: auto; puis IE6/7 peut souffrir du bug hasLayout. Que vous voyiez la différence ou non dépend du développement futur du modèle.

Source

2010-05-09 00:00:05 BalusC

Le débordement ne déclenche pas hasLayout dans IE6, uniquement dans IE7. (Et je ne pense pas que le zoom existe même dans IE6.) Supprimer la déclaration de hauteur pourrait donc avoir un effet. (Et overflow, bien sûr, a un effet indépendamment de hasLayout.) – Tgr

@Tgr: «overflow» est en effet IE7 seulement et a en effet d'autres effets secondaires. Le 'zoom' fonctionne cependant dans IE6. Encore plus, il a été introduit dans IE 5.5. – BalusC

Vous en lire un peu plus sur le raisonnement sur la façon dont chaque partie fonctionne à partir du article on quirksmode here. Quant à la height spécifiquement, voici le raisonnement qu'il énumère, bien que je n'ai pas Opera à tester (et il ne donne pas des versions spécifiques):

L'utilisation d'une déclaration width ou height est nécessaire pour faire l'effet fonctionne dans Windows Explorer et Opera. Si vous ne l'incluez pas, Explorer Windows continue d'afficher la bordure en haut des colonnes, comme s'il n'y avait pas de débordement. Opera masque complètement le contenu du conteneur.

Source

2010-05-08 23:56:04

Pourquoi cet exemple CSS utilise-t-il "height: 1%" avec "overflow: auto"?

Répondre

Questions connexes