2010-08-06 6 views
1

J'ai un HTML/CSS suivant (simplifié):HTML DIV avec la position absolue: comment faire à 100% de large et zoom-sûr?

<body>   
<style> 
     body 
     { 
      margin: 0px; 
      padding: 0px; 
      color: #fff; 
      background-color: #090909; 
      text-align: center; 
     } 

     #content 
     { 
      width: 500px; 
      margin: 0px auto; 
      background-color: blue; 
     } 

     #header 
     { 
      width: 500px; 
      margin: 0px auto; 
      background-color: green; 
     } 

     #over-div { 
      background-color: red; 
      position: absolute; 
      height: 20px; 
      width: 100%; 
      margin: 0px; 
      top: 0px; 
      left: 0px; 
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
      filter: alpha(opacity=50); 
      -khtml-opacity: 0.5; 
      -moz-opacity: 0.5; 
      opacity: 0.5; 
     } 
</style> 
<div id="over-div">aa</div> 
<div id="header"> 
     header 
</div> 
<div id="content"> 
     content here 
</div> 
</body> 

L'idée est d'avoir trop div pour couvrir la partie supérieure de la page complètement (mais ne le gardez pas là fixé, il est donc pas visible lorsque l'utilisateur fait défiler la page).

Si vous agrandissez extrêmement (Ctrl + molette) jusqu'à ce que la barre de défilement horizontale apparaisse, vous pouvez voir qu'après un défilement complet vers la droite, la surimpression ne couvre pas complètement l'en-tête du côté droit de la fenêtre. J'espérais que la largeur: 100% signifierait «toujours utiliser 100% de la largeur du corps», mais il semble que ce ne soit pas vrai pour les divs positionnés en absolu.

Navigateurs testés: Firefox 3.5, Chrome, IE8 (avec et sans mode de compatibilité).

Y at-il un moyen d'obtenir cette couverture div 100% largeur de la page?

+0

y aura-t être le texte réel dans le «over-div» ou vous souciez-vous juste de la couleur? – Hristo

Répondre

2

Oui, ajoutez au # sur-div style:

min-width:500px; 

Cela garantit que # sur-div sera au moins aussi large que vos divs #header et #content

+0

juste au cas où IE6 ne supporte pas cela. – corymathews

+0

Merci, min-largeur: 500px; avec largeur: 100%; a fait l'affaire. IE8 dans la vue de compatibilité montre aussi bien, donc j'espère que IE7 le supportera aussi. Je ne me soucie pas de IE6 pour ce projet. – JustAMartin

Questions connexes