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）位于绝对位置。 contactTabs包含jQuery UI选项卡，其内容动态加载，具有动态高度。

问题： .contactDetailsRight（Parent Div），具有背景图像和颜色，但当选项卡的内容超出页面时，div背景/颜色停止。起初我虽然可以用'scrollheight'函数改变它，但这不起作用，因为滚动的实际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中删除height属性（如果有），并添加一个css属性：overflow：auto

Answer 2

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

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

http://jsfiddle.net/cKYbz/

jQuery Tabs的高度溢出了我的其他div

2 个答案: