获取div的非溢出部分的高度

Question

假设我有一个包装器div,overflow:hidden上面有一个div,它位于可见部分的下方.如何获得内部div的可见高度？

<div id="wrapper" style="overflow: hidden; height:400px;">
    <div id="inner">
        <!--Lots of content in here-->
    </div>
<div>

我尝试获取内部div的高度的每个方法都返回包括隐藏部分的完整高度,即2000px.我希望能够获得仅可见部分的高度,因此在此示例中为400px.

我知道我可以得到它的高度parentNode,但在生产中,内部div可能不是第一个孩子.因此可能有其他div将它们分开,因此高度#inner将为400 - 无论它与它之间的元素偏移如何#wrapper.

Answer 1

作为基本算法,这可以工作:

var offset = 0;
var node = document.getElementById("inner");
while (node.offsetParent && node.offsetParent.id != "wrapper")
{
    offset += node.offsetTop;
    node = node.offsetParent;
}
var visible = node.offsetHeight - offset;

但是,如果你正在做的这些事情,也许你已经使用jQuery,这可能是其服务.height()和.offset()功能:

$("#wrapper").height()-
$("#inner").offset()['top']+
$("#wrapper").offset()['top'];