jQuery 选项卡高度溢出了我的其他 div

Question

我正在寻找修复我的网站布局。这有点令人困惑，所以我希望我能解释得足够好。

这是我当前的代码。

<div class="allContent">
    <div class="contactDetailsRight backgroundTall">
       <div class="backgroundTop">
          <div id="contactTabs">
             <ul class="headTabs">
                 <li><a href="panel.php?a=1" title="Notes">Notes</a></li>
                 <li><a href="panel.php?a=2" title="Map">Map</a></li>              
             </ul>
             <div id="notes"></div>
             <div id="map"></div>
          </div>
       </div>
    </div>
</div>

我的代码的简单分解。父div （contactDetailsRight） 定位为绝对值。联系人选项卡包含jQuery UI选项卡，内容动态加载，具有动态高度。

问题：.contactDetailsRight（父div）具有背景图像和颜色，但是当选项卡的内容超出页面时，div 背景/颜色会停止。起初，我虽然我可以用我的"滚动高度"功能来改变它，但这不起作用，因为滚动的实际div 是 （.allContent）

我不明白为什么我似乎无法获得适当的高度值。我已经尝试过这些来获得适当的高度：

<script type="text/javascript">
$(document).ready(function(){
   var h1 = $(".contentBoxRight").height();
   var h2 = $(".allContent").height();
   alert(h1 + h2);
});
</script>

任何想法将不胜感激。

Answer 1

对于 contactDetailsRight，从 CSS 中删除高度属性（如果有），并添加一个 css 属性： overflow：auto

Answer 2

页面中没有任何类contentBoxRight。 将其更改为contactDetailsRight以获取其高度

   var h1 = $(".contactDetailsRight").height();
   var h2 = $(".allContent").height();
   alert(h1 + ', ' + h2);

http://jsfiddle.net/cKYbz/