Прозрачный div, содержащий непрозрачное содержимое - высота IE 6: 100% не работает - PullRequest
Новая
       24

Прозрачный div, содержащий непрозрачное содержимое - высота IE 6: 100% не работает

2 голосов
/ 01 апреля 2010

Привет! У меня проблемы с IE 6 (не так ли?).

Я выяснил, что я считаю довольно аккуратным способом создания div с прозрачным фоном, который показывает изображение тела фона и содержит непрозрачный контент. Это на самом деле состоит из трех дел:

Один большой контейнер div, один абсолютно позиционированный прозрачный div для фона и один относительно позиционированный div с непрозрачным содержимым.

Я размещаю два элемента div внутри содержащего элемента div, чтобы они располагались друг над другом, создавая видимость прозрачного фона с непрозрачным содержимым.

Содержащий div помещается в размер содержимого div. Я установил высоту и ширину прозрачного фона на 100%, чтобы он принимал размер содержащего элемента div. Это означает, что мой фон расширяется за счет содержимого, которое расширяет возможности всего моего div.

В этом последнем бите возникает проблема. IE 6 не заставляет фоновый div принимать высоту содержащего div. Если я укажу высоту, она будет работать нормально, но это означает, что я теряю расширяемость всего этого.

Вот основной код:

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>

CSS-код (сохранить как «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*/
}

Буду признателен за любые предложения, как я мог бы обойти это. Я не хотел бы идти и устанавливать высоту каждый раз, когда я изменяю свое содержание.

1 Ответ

1 голос
/ 01 апреля 2010

IE6 не может вычислить, что 100% без высоты, указанной для содержащего элемента. Насколько мне известно, на самом деле вы ничего не можете сделать, чтобы получить именно то, что вам нужно здесь с помощью CSS, но вы можете использовать какой-то javascript, чтобы найти высоту контейнера, а затем установить высоту прозрачного div, чтобы он соответствовал высота.

Используя jQuery, я думаю, это выглядело бы примерно так: 

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

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