绝对定位的 div 及其内容答案

【问题标题】：Absolute positioned div and its content绝对定位的 div 及其内容
【发布时间】：2009-11-17 04:52:22
【问题描述】：

已编辑：第一个版本是带有错误假设的错误示例！新版本见下文！

设置：

我有 2 个绝对定位的 div：

<div class="menuSubBack">&nbsp;</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>

问题：

“menuSub” div 具有自动生成的 li 标签。 “menuSubBack”稍后会获取 javascript 生成的 svg 内容，这些内容需要获得正确绘制的高度。你可能已经猜到我需要这两个高度相同的 div。我尝试使用 jQuery 来实现这一点，但 .height()、.innerHeight() 和 .outerHeight() 都返回 0，即使对于“menuSub”div 中的 ul 也是如此。有什么方法可以得到正确的高度吗？（除了计算 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">&nbsp;</div>
      <div id="sourceDiv" class="menuSub">
        <ul>
          <li>test1</li>
          <li>test2</li>
        </ul>
      </div>
    </div>
  </body>
</html>

所以真正的问题似乎是，targetDiv 和 sourceDiv 驻留在 hoverDiv 内，加载页面时不可见，因此无法正确计算。

【问题讨论】：

百万美元的问题......到目前为止，没有人提供简单的答案。
使用提供的 HTML 和 Firefox 3.5 对我来说效果很好。您使用的是哪个浏览器，以及如何生成
标签？这是在服务器端还是客户端完成的？您确定高度检测代码是在您完成生成列表之后运行的，而不是在执行期间运行的吗？

【解决方案1】：

您是否隐藏了这些菜单？任何具有display:none 样式的元素都将返回零高度。如果你隐藏了这个菜单并且需要一个高度，那么把它放在左边，在浏览器视口之外（例如，left: -10000px）然后当你想显示菜单时，将它重新定位在视口内（例如@987654323 @)。使用这种方法，元素的高度应该是准确的。

【讨论】：

这似乎确实是问题所在。我只是对解决方案有一个问题：我想让菜单在鼠标悬停时淡入，如果菜单已经可见，那将不起作用......考虑到它，我可能只是在创建 svg 后隐藏菜单。我试试看。
很高兴我能帮上忙...只要确定元素的高度时元素是可见的，之后您可以毫无问题地隐藏它。