如何獲得div的內容高度

Question

我的div有一個造型position:absolute ，因此，如果內容高於它的高度，它不會擴展。

因此，我認為如果我找到實際內容的高度是一個解決方案，並使用position:absolute styling將高度分配給div 。

知道怎么做嗎？ 或者可能是一個想法如何根據其內容使absolute div擴展。

提前致謝！

Answer 1

這是獲得容器高度的可怕方法。 我們基本上克隆整個div，設置位置使其具有高度，檢查高度，然后將其移除：

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

這是小提琴： http ： //jsfiddle.net/vPMDh/1/

Answer 2

Element.scrollHeight應該完成這項工作。

Answer 3

即使是絕對的，它也應該擴大。 檢查你沒有高度：xxpx

如果是這樣，將其更改為最小高度

Answer 4

使用clearfix hack。 繼承人的鏈接

並為您添加clearfix

例

在你的樣式表中

<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>

Answer 5

如你所說"it doesn't expand if the content is higher than it's height." 我猜你有一個固定的高度設置..如果你出於某種原因確實需要這個，請嘗試使用min-height 。

看看這個小提琴 。

Answer 6

<div class="classname">

Some content....


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

Answer 7

感謝您提出問題。 如果你使用這個：

$(document).ready(function(){

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

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

});

我認為如果你不應用div的高度，那么很容易找到任何div的高度。

Answer 8

與@MattDiamant類似的解決方案，但使用vanilla JS並且沒有創建克隆：

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

   posAbsoluteDiv.style.height = 'auto';

   const contentHeight = posAbsoluteDiv.getBoundingClientRect().height;

   posAbsoluteDiv.style.height = heightBackup;

   return contentHeight;
}