Transparent div containing non transparent content - IE 6 height:100% not working_问答_开发者

Transparent div containing non transparent content - IE 6 height:100% not working

开发者 https://www.devze.com 2022-12-25 02:52 出处：网络

Hey there! I have a bit of a sticky IE 6 problem (don\'t we all?). I figured out what I think is a pretty neat way to have a div with a transparent background that shows the background\'s body image

Hey there! I have a bit of a sticky IE 6 problem (don't we all?).

I figured out what I think is a pretty neat way to have a div with a transparent background that shows the background's body image and containing non-transparent content. This consists of three divs really:

One big container div, one absolutely positioned transparent div for the background and one relatively positioned div with the non-transparent content.

I position the two divs inside the containing div so they sit on top of each other giving the appearance of a transparent background with non-transparent content.

The Containing div is pushed to the size of the content div. I set the transparent background's height and width to 100% causing it to take on the containing div's size. This then means that my background expands wi开发者_如何学运维th the content making all my div's extensable.

This last bit is where the problem comes in. IE 6 does not cause the background div to take on the height of the containing div. If I specify a height it works fine, but this means that I loose the extendability of the whole thing.

Here is the basic code:

HTML code

<!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>

CSS code (save as “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*/
}

I'd appreciate any suggestions how I could work around this. I would hate to have to go and set a height every time I change my content.

IE6 can't calculate what 100% is without a height specified to the containing element. To my knowledge there really isn't anything you can do to get exactly what you want here with CSS, but you could use some sort of javascript to find the height of the container and then set the height of the transparent div to match the container's height.

Using jQuery, I believe it would look something like this:

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

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

Transparent div containing non transparent content - IE 6 height:100% not working

精彩评论

关注公众号

热门标签

图文推荐

Transparent div containing non transparent content - IE 6 height:100% not working

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：