Get Height Of Absolute Element With Height Auto

I have situation like here DEMO Was wondering how to get height of expanded child? Because now jquery height() gives me 0 Any suggestions or references.

Solution 1:

For what I realize, the problem is that you are running the animation and getting the height at the same time.

If you add a timeout equal to the animation time you get 90 as the result.

$( ".list-el" ).mouseover(function() {
  var b = $(".el-bottom");
    setTimeout(function () {
       alert(b.innerHeight());
    }, 1700)
});

Solution 2:

while you are trying to get the height of the child to correct the situation, there is a better way without js, i know it's not what you've been asked for but try to consider this...don't use js if you don't have too, try to make the page load easier and faster:

ul{
    list-style: none;
    max-width: 600px;
    margin: 0 auto;
}
.list{
    width: 100%;
    padding: 0;
}
.list-el{
    width: 100%;
    background: #ff00ff;
    margin-top: 10px;
}

.el-top{
    width: 100%;
    text-align: center;
    line-height: 75px;
}

.el-bottom{
    text-align: center;
    background: #f0fff0;
    width: 100%;
    text-align: left;
    max-height: 0;
    overflow: hidden;
    height: 0;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}

.list-el:hover.el-bottom{
    max-height: 700px;
    height: 100%;
}

.list-el:hover.el-bottom{
    max-height: 700px;
    height: 100%;
}

fiddle: http://jsfiddle.net/uqmctwh2/11/

Solution 3:

Try working with .innerHeight()