Absolute positioned div and its content
EDITED: this first version was a false example with false assumptions! See below for new version!
The Setting:
I have 2 absolute positioned divs:
<div class="menuSubBack"> </div>
<div class="menuSub">
<ul>
<li>test1</li>
<li>test2</li>
</ul>
</div>
with the following styles:
<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>
The problem:
The "menuSub" div has auto generated li tags. The "menuSubBack" later gets javascript generated svg content that needs to get a height to be drawn correctly. You probably already guessed that I need those 2 divs in the same height. I tried to achieve this with jQuery but .height(), .innerHeight() and .outerHeight() all return 0, even 开发者_开发知识库for the ul inside the "menuSub" div. Is there any way of getting the correct height? (apart from counting the li elements and sum up fixed heights)
EDIT: The example previously seen Is not the correct Problem, so here follows a full sized copy/paste example:
<!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>
So the real problem seems to be, that targetDiv and sourceDiv reside inside the hoverDiv which is not visible when loading the page and thus do not get correctly calculated.
Are you hiding these menus? Any element that has a style of display:none will return a height of zero. If you have this menu hidden and need a height, then position it to the left, out of the browser viewport (e,g, left: -10000px) then when you want to display the menu, reposition it inside the viewport (e.g. left: 0px). Using this method the height of the element should be accurate.
加载中,请稍侯......
精彩评论