How can I get the height of an element using css only

Question

We have a lot of options to get the height of an element using jQuery and JavaScript.

But how can we get the height using CSS only?

Suppose, I have a div with dynamic content - so it does not have a fixed height:

_x000D_

.dynamic-height {_x000D_
   color: #000;_x000D_
   font-size: 12px;_x000D_
   height: auto;_x000D_
   text-align: left;_x000D_
}

_x000D_

<div class='dynamic-height'>_x000D_
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem._x000D_
</div>

_x000D_

I want to set the margin-top of .dynamic-height to a value which is equal to (the height of the div - 10px) using CSS only.

If I get the height I can use CSS calc() function.

How do I do that?

User · Answer

You could use the CSS calc parameter to calculate the height dynamically like so    x000D   x000D   dynamic-height   x000D     color   000  x000D     font-size  12px  x000D     margin-top  calc 100  - 10px   x000D     text-align  left  x000D    x000D   lt div class  dynamic-height  gt  x000D       lt p gt Lorem ipsum dolor sit amet  consectetuer adipiscing elit  Aenean commodo ligula eget dolor  Aenean massa  Cum sociis natoque penatibus et magnis dis parturient montes  nascetur ridiculus mus  Donec quam felis  ultricies nec  pellentesque eu  pretium quis  sem  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Unfortunately  it is not possible to  quot get quot  the height of an element via CSS because CSS is not a language that returns any sort of data other than rules for the browser to adjust its styling  Your resolution can be achieved with jQuery  or alternatively  you can fake it with CSS3 s transform translateY    rule   The CSS Route If we assume that your target div in this instance is 200px high - this would mean that you want the div to have a margin of 190px  This can be achieved by using the following CSS   dynamic-height       -webkit-transform  translateY 100      if your div is 200px  this will move it down by 200px  if it is 100px it will down by 100px etc     transform  translateY 100              if your div is 200px  this will move it down by 200px  if it is 100px it will down by 100px etc     margin-top  -10px     In this instance  it is important to remember that translateY 100   will move the element in question downwards by a total of it s own length  The problem with this route is that it will not push element below it out of the way  where a margin would   The jQuery Route If faking it isn t going to work for you  then your next best bet would be to implement a jQuery script to add the correct CSS for you  jQuery document  ready function       wait for the document to load         dynamic-height   each function      loop through each element with the  dynamic-height class           this  css                margin-top      this  outerHeight   - 10    px    adjust the css rule for margin-top to equal the element height - 10px and add the measurement unit  quot px quot  for valid CSS

[css] How can I get the height of an element using css only

The answer is

Examples related to css

Tags