CODEWITHSUNDEEP
javascriptjquerycss
kfirba
kfirba

Reputation: 5441

How to get div's content height

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!

Upvotes: 3

Views: 6849

Answers (8)

Bobby
Bobby

Reputation: 6940

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

Upvotes: 0

Mohsen
Mohsen

Reputation: 65855

Element.scrollHeight should do the job.

Upvotes: 3

Hassaan
Hassaan

Reputation: 326

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.

Upvotes: 0

pixeltracer
pixeltracer

Reputation: 60

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>

Upvotes: 0

MattDiamant
MattDiamant

Reputation: 8791

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/

Upvotes: 1

Silvia Tacher
Silvia Tacher

Reputation: 109

<div class="classname">

Some content....


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

Upvotes: 0

dev
dev

Reputation: 4009

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.

Upvotes: 0

monxas
monxas

Reputation: 2657

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

if so, change it to min-height

Upvotes: 0

Related Questions