Question

我有一个DIV，里面有一些文字。但是DIV的高度从0px开始，它还有一个'溢出：隐藏'。之后，我正在使用动画系统来增加DIV的高度。但我无法给DIV一个固定的高度，因为DIV内部文本的长度会有所不同。

有没有办法告诉DIV的高度，当它足够大以适应其中的所有内容时？

Answer 1

我做了一个可怕的黑客，但看看这是否足够好。基本上你通过将高度设置为auto来获得内容高度，然后将其重置为零，最后使用动画功能，如下所示：

var tempHeight = $(".sample").css({"height" : "auto"}).height();
$(".sample").css({"height" : "0px"}).animate({
    height : tempHeight
},1000);

其中.sample是对具有可变文本内容的div的引用。查看演示以便更好地理解。

纯Javascript版本：

document.getElementById("sample").style.height = "auto"; //The id of this div is 'sample'
var tempheight = document.getElementById("sample").offsetHeight;
document.getElementById("sample").style.height = "0px";
/*
Custom Animation function, Use tempheight to get the full content
*/

<强> DEMO For The Jquery Version

Answer 2

也许你可以试试这个：

将文字放在另一个DIV中......比如......

<div>
   <div>some text</div>
</div>

然后根据内部div的高度（没有隐藏的溢出）为外部div（作为隐藏溢出）设置动画。

希望这有帮助

Answer 3

根据您正在使用/使用的内容，您不需要知道高度，因为将其设置为“自动”将确保它扩展以填充内容。

但是，在您通过使用javascript获取高度之前，您也可以不将高度设置为0。例如在jQuery中：

$("div").each(function()
{

  $(this).attr("data-height", $(this).height()).css({"height": "0", "overflow": "hidden");

});

现在每个div都有一个名为“data-height”的属性，其属性值为原始高度。然后，您可以在需要时使用它来扩展div。

Answer 4

在动画显示div之前，克隆div并摆脱height:0px约束（例如，将高度更改为auto）。然后抓住克隆div的高度，以便在动画中使用。

在jQuery中，这看起来像是：

var myDiv = $('div');
var myDivClone = div.clone().insertAfter(myDiv).css('height','auto');
var myDivHeight = myDivClone.outerHeight();
myDivClone.remove();
myDiv.animate({height: myDivHeight}, 250);

注意实际克隆有问题的元素的重要性，而不是仅仅创建一个新元素并用相同的内容填充它。您需要准确地重新创建元素（除了之后执行的高度修改），包括类等。

ALSO 请注意myDiv之后立即将其注入DOM的重要性。这是因为在高度计算时，相同的CSS会影响它作为影响myDiv。唯一可能的例外是你在CSS中使用:last-child选择器，克隆最终成为父元素的最后一个子元素。但是这种问题应该很容易解决。

Answer 5

if(el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth)
{
    //keep making element bigger
    el.style.height = parseInt(el.style.height) + 2 + "px"
}

您可以将此代码段放在某种递归函数或while循环中。基本上，您正在检查滚动条将显示的可视区域之外是否有更多内容。

Answer 6

如何首先在off屏幕div中删除文本并从中获取尺寸？

获取div的高度取决于里面的文本

6 个答案: