Get Height of Absolute Positioned Children

by bizamajig

HTML

<ul id="sameheight">
    <li>Lorem Ipsum<div class="child" style="">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div></li>
    <li>Lorem Ipsum<div class="child" style="">height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;height:200px;</div></li>
    <li>Lorem Ipsum<div class="child"...

CSS

body {height:1000px;font:normal 11px Verdana,Arial,Sans-Serif;}

ul#sameheight {
  position:relative;
  background:#aaa;
  border:1px solid #999;
  padding:10px;
}

ul#sameheight li {
  width:200px;
  list-style:none;
  height:30px;
  background:#fff;
  padding:5px 10px;
  margin:0px 0px 2px; 
  position:relative; 
}

ul#sameheight li .child {
  width:200px;
  height:300px;
  background:#ccc;
  padding:10px;
  position:absolute;
  left:100%;
  top:0px;
  display:none;
}

JavaScript

//How to Push Parent element to the height of absolute positioned div

$(function() {
    $('#sameheight li').hover(function() {
       $('div.child', this).show();
        var biggestHeight = $('div.child', this).height();
        if($(this).height() < biggestHeight) {
             $(this).parent().height(biggestHeight+$('div.child', this).offset().top);
         } else {
             $(this).parent().css('height', 'auto');   
         }
    }, function() {
       $('div.child', this).hide();  
        $(this).parent().css('height', 'auto');
    }); 
    
});