Question

如何获得包含div的剪切区域的div的高度？

<div style="height: 20px; overflow: hidden">
  content<br>content<br>content<br>
  content<br>content<br>content<br>
  content<br>content<br>content<br>
</div>

Answer 1

嗯，你不能这样做，但是当你向容器中添加一个内部元素时，可以这样做：

<div id="element" style="height: 20px; overflow: hidden;">
    <p id="innerElement"> <!-- notice this inner element -->
        content<br />content<br />content<br />
        content<br />content<br />content<br />
        content<br />content<br />content<br />
    </p>
</div>

旁注：在段落中包装内容也是一个很好的做法，加上一个额外的元素没有给出那么多问题，如果有的话......

和JavaScript：

var innerHeight = document.getElementById('innerElement').offsetHeight;
alert(innerHeight);

P.S。要使这个JavaScript工作，请将它放在#element div之后，因为如果没有指示DOM，则在DOM准备好之前执行普通JavaScript。要在DOM准备就绪时使其工作，check this。

但我建议获取jQuery，如果您要在网站中扩展JavaScript操作，它会在以后派上用场。

另外，对于真实的，jQuery是强大的力量。

这样，只需将此脚本添加到<head />（假设您已包含jQuery）：

$(document).ready(function() {
 var innerHeight = $('#innerElement').height();
 alert(innerHeight);
});

Example @jsFiddle using jQuery way!

Answer 2

这适用于所有情况，无论您有内部文本节点还是容器。这是使用jquery，但你不需要。

//return the total height.
totalHeight = $('#elem')[0].scrollHeight;
//return the clipped height.
visibleHeight = $('#elem').height();

$（'＃elem'）[0]从jquery调用返回dom元素。所以你可以使用普通的'javascript。

在任何dom elem上使用它

Answer 3

这是使用Fabian理念实现所需目标的一种方法：

function GetHeight() {
    var oDiv = document.getElementById("MyDiv");
    var sOriginalOverflow = oDiv.style.overflow;
    var sOriginalHeight = oDiv.style.height;
    oDiv.style.overflow = "";
    oDiv.style.height = "";
    var height = oDiv.offsetHeight;
    oDiv.style.height = sOriginalHeight;
    oDiv.style.overflow = sOriginalOverflow;
    alert("Real height is " + height);
}

现场演示和测试用例：http://jsfiddle.net/yahavbr/7Lbz9/

Answer 4

这不可能是afaik。您可以尝试删除该样式并在获得高度后使用javascript进行设置。不是最优雅的解决方案，但我认为它是唯一的解决方案。

Answer 5

本机Javascript。 Supported最早可以追溯到MSIE 6：

<div id="cont" style="width:100px;height:100px;overflow:auto;border:#000 solid 1px;">
    <div style="height:1500px;">dddd</div>
</div>


<script>alert(document.getElementById('cont').scrollHeight)</script>

Answer 6

使用元素的... .open-sidebar-class { background-color:green; } .close-sidebar-class { background-color:red; } ...代替scrollHeight或clientHeight。

包裹内容方法更好。

获得剪裁DIV的全高

6 个答案: