Question

我有一个固定宽度（800px）的盒子，里面装满了来自nicEdit的内容。

我需要知道放在盒子里面的内容的高度，如果我计算它不适用于长文本或图像或不同字体大小的行数...

我需要找到设置框的高度，其高度不会显示滚动条，也不会高于内容。

<div style="width: 800px; overflow: hidden"><?= $contentbyuser; ?></div>

此“页面”将显示在iFrame中，代码如下：

<iframe style="width: 800px;height:???px;" src="page.php"></iframe>

如何使用javascript和/或jQuery找到设置为iframe的高度？

Answer 1

您可以创建一个虚拟元素，将HTML插入其中，然后检查其高度。

//create dummy
var $dummy = $('<div />').css({ position : 'absolute', left : -9999, width : 800 }).html(randomTextandImages);

//add dummy to the DOM
$("body").append($dummy);

//get the height of the dummy
var theHeight = $dummy.height();

//at this point we can remove the dummy from the DOM
$dummy.remove();

//set the height of the iframe
$("iframe").height(theHeight);

请注意，虚拟元素应该与常规容器应用相同的CSS，以便它呈现相同的效果。字体属性尤为重要（例如font-size，font-weight，line-height等）。

将位置设置为absolute并给出较大的负左属性意味着这将在屏幕外发生，因此用户不会看到它发生。

另外，我不记得过去我是否遇到过这个问题，但是如果你的高度为零，那么得到虚拟高度的代码应该放在短暂的超时时间内所以假人可以在达到它的高度之前渲染。

Answer 2

根据内容将div的高度设置为自动。然后，您可以在JavaScript中执行此操作：

$("div").html(randomTextandImages);
var height = $('div').height();        // Give this to whoever will be using the iframe

查找包含文本的元素的高度

2 个答案: