如何获得div的内容高度

Question

My div has a styling position:absolute , and as a result, it doesn't expand if the content is higher than it's height.

Therefore, I thought that a solution would be if I find what the is the actual content's height, and assign the height to the div with the position:absolute styling.

Any idea how to do it? or maybe an idea how to make an absolute div to expand according to its content.

Thanks in advance!

Answer 1

Here's an awful way to get the height of the container. We're basically cloning the whole div, setting the position so that it has height, checking that height, and then removing it:

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

Here's the fiddle: http://jsfiddle.net/vPMDh/1/

Answer 2

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

Answer 3

It should expand even if being absolute. check you don't have a height: xxpx

if so, change it to min-height

Answer 4

use a clearfix hack. heres the link

and add clearfix to you div

example

in your style sheet

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

... and in your div add clearfix the class

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

Answer 5

As you've said "it doesn't expand if the content is higher than it's height." I guess you have a fixed height set on it.. if you do need this for some reason try using min-height instead.

Have a look at this fiddle .

Answer 6

<div class="classname">

Some content....


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

Answer 7

Thanks for contributing your question. If you use this:

$(document).ready(function(){

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

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

});

I think it is easy as clean code to find the height of any div if you do not apply the div's height too.

Answer 8

similar solution to @MattDiamant, but with vanilla JS and without creating a clone:

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

   posAbsoluteDiv.style.height = 'auto';

   const contentHeight = posAbsoluteDiv.getBoundingClientRect().height;

   posAbsoluteDiv.style.height = heightBackup;

   return contentHeight;
}