jquery - Unable to get the correct height of element -

i've got directive whos purpose set child's height equal parent.

i can not use height: inherit; or height: 100%; this.

the problem outerheight(true) returns wrong height no matter do. height returns 175 when should closer around 720, me doesn't make sense whatsoever..

here's plunkr: http://plnkr.co/edit/7tetrw9rstgr7mfzzdg0?p=preview, didn't manage directive run in though. had same issue in jsfiddle, not sure i'm doing wrong there hope knows how fix , can play around in it.

i've used outerheight(), outerheight(true), height() , .css('height') of them returns 175 height.

edit: tried third-party plugin sets columns equal height, plugin got wrong height.

edit 2: found out in fact working, after you've resized window.. directive being run before element has gotten height or something?

edit 3: found working solution it's not optimal causes delay of 200ms, therefore causing element jump down once executes:

core.directive('heightinheritance', ['$timeout', function($timeout) {    return {     restrict: 'a',      link: function(scope, element, attrs) {        $timeout(function(){          var parentheight = element.parent().outerheight(true);          element.css('height', parentheight + 'px');          $(window).resize(function() {            parentheight = element.parent().outerheight(true);            element.css('height', parentheight + 'px');            console.log(element.parent().css('height'));         });        }, 200);     }   } }]); 

this solution came here: how can run directive after dom has finished rendering?

however, suggests should without delay, go under 200ms same result before. figured cause delay in route did nothing solve issue either unfortunately. there way can remove delay here?

i've looked @ these questions:

how calculate element's width , height padding / margin values using less code?

jquery: wrong values when trying div height

jquery height() returning false values

but says same thing basically, , answers aren't working.

here's directive:

core.directive('heightinheritance', [function() {    return {     restrict: 'a',      link: function(scope, element, attrs) {        var parentheight = element.parent().outerheight(true);        element.css('height', parentheight + 'px');     }   } }]); 

the height based off image sets height of left column. using bootstrap's row-eq-height class make direct columns same height. working correctly need make .row inside of right column inherit height of right column.

<div class="row row-eq-height">   <div class="col-sm-1 col-lg-2 hidden-xs"></div>   <div class="col-xs-12 col-sm-4 col-lg-3">     <img ng-src="somepath" class="image"> <!-- sets height of col -->   </div>   <div class="col-lg-5">     <div data-height-inheritance class="row"> <!-- need inherit height parent -->       <div class="col-sm-1"></div>       <div data-height-inheritance class="col-sm-10"></div>       <div class="col-sm-1"></div>     </div>   </div> </div> 

what causing issue? don't know else here.

i don't have enough reputation add comment, have tried adding style="overflow-y:hidden" parent element prior getting height (you can reset afterwards). have had issues overflow affected js height values.