如何獲取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的內容高度

回答

相關問題