How to get div height with min-height?

Question

I'm trying to get the height prop of a div in jQuery. That's really simple :

$("#mydiv").css("height");

That's right. But if the div have a min-height superior of the height, this code will return the min-height. How can I force it to give me the height ?

Example :

$("#result").html($("#mydiv").css("height"));

#mydiv{
  width : 100px;
  height : 10px;
  min-height : 80px;
  background : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv"></div>
<div id="result"></div>
In this example, how can I get "10px" ?

Height of element is `80px` as you can see in **browser inspect** — Mohammad, Dec 06 '18 at 07:26
Hi @Mohammad. Sure, but how can i get the "height" style value (here 10px) ? — , Dec 06 '18 at 07:28
No way to get it. js can only reads the DOM objects, this is the actual value of your element height property. — vaso123, Dec 06 '18 at 07:28
Hi @vaso123. Argh ! ^^ thx (I'll wait 5 min and put it as solved). — , Dec 06 '18 at 07:29
What vaso123 said, javascript takes direct elements height, not what written in a height thing. — Thomas J., Dec 06 '18 at 07:30
As you mentioned min-height is `80px` it will override the height property if it less than. In your example height is `10px`. — Anil Talla, Dec 06 '18 at 07:30
And if it's not in a stylesheet page but int the stye attr ? ( — , Dec 06 '18 at 07:31
Possible duplicate of https://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript — Asons, Dec 06 '18 at 08:57

Mohammad · Accepted Answer · 2018-12-06T07:34:33.503

4

You can set min-height of element to auto and get height property of it. Then return min-height to first value.

var minHeight = $("#mydiv").css("min-height");
$("#mydiv").css("min-height", "auto");
console.log($("#mydiv").height());
$("#mydiv").css("min-height", minHeight);

#mydiv{
  width : 100px;
  height : 10px;
  min-height : 80px;
  background : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv"></div>

edited Dec 06 '18 at 07:34

answered Dec 06 '18 at 07:32

Mohammad

21,175
15
55
84

Thx, can be a cood idea, sound a little bit like a hack but can be ok ;) – Dec 06 '18 at 07:33

score 0 · Answer 2 · answered Dec 06 '18 at 07:32

As you are keeping the min-height to 80px which is greater than 10px(height).

Your div will be 80px all the time.

As you can see in the below example I have kept height to 100px and see it's it's height getting 100px not 80px as height is greater then min height.

$("#result").html($("#mydiv").css("height"));

#mydiv{
  width : 100px;
  height : 100px;
  min-height : 80px;
  background : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv"></div>





<div id="result"></div>
In this example, how can I get "10px" ?

So, if you want ur div to be 10px tall then either remove min-height or set min-height value to be samller than 10px.

Hope it helps :)

Thanks, but my problem is only when min-height is > to height (I need this condition ^^) — , Dec 06 '18 at 07:34

escapeVelocity · Answer 3 · 2018-12-06T08:54:45.687

Although Mohammed's answer is the best way, another way is to add a child and set its height to 'inherit' and read the 'height' property from the child.

var source = $("#mydiv");
var sourceHeight = source.append('<div></div>').find('div').css('height', 'inherit').css('height');
console.log('height of source is '+sourceHeight);
source.find('div').remove(); //make sure to remove it

#mydiv{
  width : 100px;
  height : 10px;
  min-height : 80px;
  background : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv" style=""></div>

How to get div height with min-height?

3 Answers3