如何获取div的内容高度

我的div的造型为position:absolute，因此，如果内容高于其高度，则不会展开。如何获取div的内容高度

因此，我认为一个解决办法是，如果我发现有什么实际内容的高度，并与position:absolute造型分配高度与div。

任何想法如何做到这一点？或者可能是一个想法如何使absolutediv根据其内容进行扩展。

在此先感谢！

2013-03-11 kfirba

有'位置：absolute'不应该阻止它扩大以适应内容，只要你不” t设定一个特定的高度。请参阅示例：http://jsfiddle.net/zaknotzak/vPMDh/ – zakangelle 2013-03-11 21:09:21

如果div内的元素是浮动的，请确保您应用某种clearfix – keithhatfield 2013-03-11 21:10:44

可以添加小提琴，以便我们实际上可以查看您的问题。也许更多的眼睛审查您的代码将看到什么是错误的第一 – Ingo 2013-03-11 21:13:07

这是一个很糟糕的方法来获取容器的高度。我们基本上克隆了整个DIV，设置位置，使其具有高度，检查高度，然后将其取出：

$(function() { 
    var clone = null; 
    alert(clone = $('.test').clone().css('position', 'static').appendTo(".container").height()); 
    clone.remove(); 
});

这里的小提琴：http://jsfiddle.net/vPMDh/1/

来源

2013-03-11 21:40:12 MattDiamant

我喜欢这个主意:)谢谢！ – kfirba 2013-03-11 21:47:22

不幸的是，我已经有足够多的时间来解决这个问题了。设置一个div的高度等于另一个div的高度，但它的绝对位置。我一直在寻找更好的方式，但还没有找到。 – MattDiamant 2013-03-11 21:49:51

好吧，一直在想几个小时......不想使用这种解决方案，但我找不到另一个解决方案 – kfirba 2013-03-11 21:52:27

即使是绝对的，它也应该展开。检查你没有一个高度：xxpx

如果是这样，将其更改为最小高度

来源

2013-03-11 21:09:41 monxas

这很奇怪..我有双重检查它，我拥有的是最小高度。位于div位置的div是绝对位置：绝对，也许这就是原因？ – kfirba 2013-03-11 21:22:12

使用clearfix黑客。 heres the link

，并添加clearfix给你的div

例如

在样式表

<style> 
.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
} 
</style>

... 并在你的DIV添加clearfix类

<div class="clearfix"> 
    //some html tags 
</div>

来源

2013-03-11 21:10:39 pixeltracer

无法找到如何使用它>< – kfirba 2013-03-11 21:22:42

将clearfix代码复制到您的样式表 – pixeltracer 2013-03-11 21:42:09

那么，它不工作:( – kfirba 2013-03-11 21:44:27

正如你所说的"it doesn't expand if the content is higher than it's height."我想你有一个固定的高度集..如果你确实需要这个由于某种原因尝试使用min-height来代替。

看一看这个fiddle。

来源

2013-03-11 21:19:00 dev

这很奇怪..我已经加倍检查它，而我所拥有的只是min-height。位于div中的div位置：绝对位置也是position：absolute，也许这就是原因？ – kfirba 2013-03-11 21:21:10

@kfirba yes th在这将是为什么。看看这个小提琴http://jsfiddle.net/BZbhK/1/。你会注意到div上的包装应该显示一个蓝色的背景，但它不能确定其内容的高度。我倾向于远离绝对定位（除非我需要浮动div）。 – dev 2013-03-11 21:30:09

<div class="classname"> 

Some content.... 


<p style="clear:both">&nbsp</p> 
</div>

来源

2013-03-11 21:29:40

感谢您提供您的问题。如果您使用此：

$(document).ready(function(){ 

var x = $("#container").height(); 
alert(x); 

//if not works then 
    var y = $("#container").outerHeight(); 
    alert(y); 

});

我认为这是很容易清洁代码找到任何div的高度，如果你不申请div的高度了。

来源

2013-03-11 22:00:20 Hassaan

Element.scrollHeight应该完成这项工作。

来源

2013-07-15 21:20:21 Mohsen

例如，Opera 12无法正常工作。 – Alvaro 2013-10-31 16:28:17

类似的解决方案，以@MattDiamant，但香草JS和没有创建克隆：

function getDivHeight(posAbsoluteDiv) { 
    const heightBackup = posAbsoluteDiv.style.height; 

    posAbsoluteDiv.style.height = 'auto'; 

    const contentHeight = posAbsoluteDiv.getBoundingClientRect().height; 

    posAbsoluteDiv.style.height = heightBackup; 

    return contentHeight; 
}

来源

2017-09-13 17:19:12 Bobby

如何获取div的内容高度

回答

相关问题