Question

编辑：第一个版本是一个错误假设的错误示例！请参阅下面的新版本！

设置：

我有两个绝对定位的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中，这在加载页面时是不可见的，因此无法正确计算。

Answer 1

你藏着这些菜单吗？任何样式为display:none的元素都将返回零高度。如果您隐藏此菜单并需要高度，则将其放置在浏览器视口之外（例如，left: -10000px），然后当您想要显示菜单时，将其重新定位在视口内（例如left: 0px）。使用此方法，元素的高度应该是准确的。

绝对定位div及其内容

1 个答案: