РЕДАКТИРОВАНИЕ: эта первая версия была ложным примером с ложными предположениями! Смотрите новую версию ниже!
Настройка:
У меня есть 2 абсолютно позиционированных div:
<div class="menuSubBack"> </div>
<div class="menuSub">
<ul>
<li>test1</li>
<li>test2</li>
</ul>
</div>
со следующими стилями:
<style type="text/css">
.menuSub
{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
overflow: auto;
color: #FFFFFF;
font-size: 8pt;
z-index: 99 !important;
}
.menuSub ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
.menuSub ul li
{
text-align: center;
line-height: 25px;
height: 25px;
font-size: 12px;
}
.menuSubBack
{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
overflow: hidden;
z-index: 1 !important;
background: #00FFFF;
}
</style>
Проблема:
Div "menuSub" имеет автоматически сгенерированные теги li. Позже «menuSubBack» получает сгенерированный javascript svg-контент, который должен получить высоту для правильного отображения. Вы, наверное, уже догадались, что мне нужны эти 2 div в той же высоте. Я пытался добиться этого с помощью jQuery, но .height (), .innerHeight () и .outerHeight () все возвращают 0, даже для ul внутри div «menuSub». Есть ли способ получить правильную высоту? (кроме подсчета элементов li и суммирования фиксированных высот)
РЕДАКТИРОВАТЬ: Пример, который вы видели ранее, не является правильной проблемой, поэтому вот следующий пример полноразмерного копирования / вставки:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
.menuSub
{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
overflow: auto;
color: #FFFFFF;
font-size: 8pt;
z-index: 99 !important;
}
.menuSub ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
.menuSub ul li
{
text-align: center;
line-height: 25px;
height: 25px;
font-size: 12px;
}
.menuSubBack
{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
overflow: hidden;
z-index: 1 !important;
background: #00FFFF;
}
.menuHover
{
position: absolute;
top: 20px;
left: 20px;
width: 100px;
z-index: 10;
display: none;
overflow: visible;
}
</style>
<script type="text/javascript">
$(document).ready(
function()
{
$("#targetDiv").height($("#sourceDiv").height());
$("#hoverDiv").fadeIn("fast");
}
);
</script>
</head>
<body>
<div id="hoverDiv" class="menuHover">
<div id="targetDiv" class="menuSubBack"> </div>
<div id="sourceDiv" class="menuSub">
<ul>
<li>test1</li>
<li>test2</li>
</ul>
</div>
</div>
</body>
</html>
Таким образом, реальная проблема заключается в том, что targetDiv и sourceDiv находятся внутри hoverDiv, который не виден при загрузке страницы и, следовательно, не рассчитывается правильно.