Div transparent contenant contenu non transparent - IE 6 hauteur: 100% ne fonctionne pas

Hey there! J'ai un peu un problème collant IE 6 (ne nous tous?).Div transparent contenant contenu non transparent - IE 6 hauteur: 100% ne fonctionne pas

J'ai trouvé ce que je pense être une manière très agréable d'avoir un div avec un fond transparent qui montre l'image du corps de l'arrière-plan et contenant un contenu non transparent. Il se compose de trois divs:

Un grand conteneur div, un div transparent pour l'arrière-plan et un div relativement positionné avec le contenu non-transparent.

Je positionne les deux div à l'intérieur du div contenant afin qu'ils se superposent, donnant l'apparence d'un fond transparent avec un contenu non transparent.

La div Containing est poussée à la taille du contenu div. Je définis la hauteur et la largeur de l'arrière-plan transparent sur 100%, ce qui l'amène à prendre la taille div divisée. Cela signifie alors que mon arrière-plan se développe avec le contenu rendant tous mes div extensible.

Ce dernier bit est l'endroit où le problème entre en jeu. IE 6 ne provoque pas la div d'arrière-plan à prendre la hauteur de la div contenant. Si je spécifie une hauteur cela fonctionne bien, mais cela signifie que je perds l'extensibilité de l'ensemble.

Voici le code de base:

code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
</head> 

<body> 
<div id="contentDiv"> 
<div class="tranparentDiv"></div> 
<div class="nonTranparentContent"> 
<div class="contentBody"> 
<h2 id="quote">“time is given to let you apply what you have learnt in reality.”</h2> 
<p>– Nandipha Nombuthuma, Concept Interactive graduate</p> 
</div> 
</div> 
</div> 
</body> 
</html>

code CSS (Enregistrer sous « style.css »)

@charset "utf-8"; 
/* CSS Document */ 
body{ 
background:url(bg.png); 
} 

.tranparentDiv{ 
-khtml-opacity:.6; /*several different ways to set the transparency to ensure cross browser independence*/ 
-moz-opacity:.6; 
-ms-filter:"alpha(opacity=60)"; 
filter:alpha(opacity=60); 
opacity:.6; 
position:absolute; 
top:0; 
left:0; 
background:#FFFFFF; 
width:100%; 
height:100%; 
} 

.nonTranparentContent{ 
width:inherit; 
position:relative; 
} 

#contentDiv{ 
width:500px; 
margin-left:auto; 
margin-right:auto; 
position:relative; 
/*height:200px add this to work in ie 6*/ 
}

J'apprécierais des suggestions comment je pourrais travailler autour de cela. Je détesterais devoir aller et mettre une hauteur chaque fois que je change mon contenu.

Source

2010-04-01 phunder

IE6 ne peut pas calculer ce que 100% est sans une hauteur spécifiée pour l'élément conteneur. À ma connaissance, il n'y a rien que vous pouvez faire pour obtenir exactement ce que vous voulez avec CSS, mais vous pouvez utiliser une sorte de javascript pour trouver la hauteur du conteneur et ensuite définir la hauteur de la div transparente pour correspondre à celle du conteneur la taille.

En utilisant jQuery, je crois qu'il ressemblerait à quelque chose comme ceci:

var containerHeight = $('#contentDiv').height() + 'px'; 

$('.tranparentDiv').height(containerHeight);

Source

2010-04-01 14:02:23

Hey merci pour la réponse. J'ai fini par faire exactement ça :). Je n'aime généralement pas utiliser JavaScript comme solution, car certaines personnes l'éteignent. Je l'ai écrit de telle façon que le Java n'est exécuté que si IE 6 est utilisé. J'ai pensé que si quelqu'un est assez intelligent pour désactiver JavaScript, il n'utilisera probablement pas IE 6. – phunder

"si quelqu'un est assez intelligent pour désactiver JavaScript, il n'utilisera probablement pas IE 6" - Ha, c'est très vrai :) - Glad vous l'avez redressé. –

Div transparent contenant contenu non transparent - IE 6 hauteur: 100% ne fonctionne pas

Répondre

Questions connexes