Question

I am looking to fix my layout of my website. It is somewhat confusing, so I hope I can explain well enough.

This is my current code.

<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>

A Simple break down of my code. The parent div (contactDetailsRight), is positioned absolute. The contactTabs contains, jQuery UI Tabs with the content loading dynamically, with a dynamic height.

The Problem:
.contactDetailsRight (Parent Div), has a background image and color, but when the content of the tab goes beyond the page, the div background/color stops. At first I though I could change that with my ‘scrollheight’ function, but this does not work, Because the actual div that is scrolling is (.allContent)

I don’t understand why I can’t seem to get a proper height value. I have tried these to get proper height:

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

Any thoughts would be greatly appreciated.

Answer 1

There is nothing with class contentBoxRight in the page. Change it to contactDetailsRight to get its height

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

http://jsfiddle.net/cKYbz/