0

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

我需要知道放入框中的内容的高度，如果我计算行数，它将不适用于长文本、图像或不同的字体大小......

我需要找到高度以将框设置为不会显示滚动条且不会高于内容的高度。

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

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

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

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

4

2 回答 2

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，以便呈现相同的内容。字体属性特别重要（例如字体大小、字体粗细、行高等）。

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

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

于 2013-09-24T18:46:40.907 回答
0

根据内容将 div 的高度设置为自动。然后你可以在你的 JavaScript 中这样做：

$("div").html(randomTextandImages);
var height = $('div').height();        // Give this to whoever will be using the iframe
于 2013-09-24T18:46:32.637 回答