使用高度自动获取绝对元素的高度答案

【问题标题】：get height of absolute element with height auto使用高度自动获取绝对元素的高度
【发布时间】：2015-04-24 21:18:38
【问题描述】：

我有这样的情况DEMO

想知道如何获得扩展孩子的身高吗？因为现在 jquery height() 给了我 0

任何建议或参考。

【问题讨论】：

实际上.height() 应该可以工作。 It works fine for me。问题是您正在记录动画开始/结束之前的高度，然后高度仍然为 0。
也许你可以提供小提琴链接？因为这里jsfiddle.net/uqmctwh2/10我有我描述的情况。
我在第一条评论中提供了一个链接。

标签： jquery html css

【解决方案1】：

据我所知，问题在于您正在运行动画并同时获取高度。

如果你添加一个等于动画时间的超时，你会得到90作为结果。

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

【讨论】：

【解决方案2】：

当你试图让孩子的身高来纠正这种情况时，有一个没有 js 的更好的方法，我知道这不是你被要求的但试着考虑这个......不要使用js如果你没有，尽量让页面加载更简单更快：

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%;
}

小提琴：http://jsfiddle.net/uqmctwh2/11/

【讨论】：

虽然这可能是一个“好习惯”，但它与 OP 的问题完全无关。这个答案更适合作为评论。
你说得对，但你可以看到他正在努力争取什么，所以他真的不需要得到孩子的身高来纠正这个问题，这就像“x-y 问题”......跨度>

【解决方案3】：

尝试使用.innerHeight()

【讨论】：