75

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:

.dynamic-height {
   color: #000;
   font-size: 12px;
   height: auto;
   text-align: left;
}
<div class='dynamic-height'>
    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.
</div>

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?

3
  • I don't think this can be done with css only May 24, 2017 at 9:10
  • I could be wrong but could SASS, LESS or similar not help with that?
    – Nope
    May 24, 2017 at 9:13
  • 1
    Maybe a simplistic remark, but doesn't padding: 5px 0; box-sizing: border-box; help you achieve the same?
    – kevin b.
    May 24, 2017 at 9:15

5 Answers 5

87

Unfortunately, it is not possible to "get" 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 "px" for valid CSS
        });
    });
});
2
  • Nice answer. I've used outerHeight() approach and it's working for me. Thanks! Oct 11, 2021 at 11:17
  • @TomaszDzięcielewski you're welcome! I'm glad it helped!
    – Frits
    Oct 12, 2021 at 3:08
27

You could use the CSS calc parameter to calculate the height dynamically like so:

.dynamic-height {
   color: #000;
   font-size: 12px;
   margin-top: calc(100% - 10px);
   text-align: left;
}
<div class='dynamic-height'>
    <p>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.</p>
</div>

3
  • 11
    How does this work if you don't know what the size of the other div (in your case 10px) is going to be? For example in textareas etc..
    – Enrico
    Jan 4, 2021 at 14:10
  • It simply won't work with entirely dynamic scenario as other suggested that CSS is not a language that return values. Sep 10, 2021 at 12:25
  • How is that related to the question, which preciesly asks 'How can I get the height of an element using css only'? Sep 30, 2022 at 12:32
8

Simplest & quickest solution is to try vanilla(plain) Javascript in your chrome developer console to calculate height or width of any element, just put any element's 'id' into this and get it calculated:

var clientHeight = document.getElementById('exampleElement').clientHeight;
alert(clientHeight);

var offsetHeight = document.getElementById('exampleElement').offsetHeight;
alert(offsetHeight)
4

There is no way using css. But,

We can achive it using a single line of JavaScript.

For finding height of div

document.getElementById("div-id").clientHeight

For finding width of div

document.getElementById("div-id").clientWidth
-1

If you want move down the div it is very simple. Lets define a div with a .box class and define a height of 150px so if you run the snippet u will see the element.

Now lets convert the .box as a flexbox like this:

.box {
    display: flex;
    flex-flow: row;
    ...
}

Finally, lets move our div with .dynamic-height class to the bottom of its container with align-self: end like this:

.dynamic-height {
    align-self: end;
    ...
}

I also change the color of the .dynamic-height class to green so it help us to see the effect of the align-self: end.

.box {
  display: flex;
  flex-flow: row;
  height: 150px;
}

.dynamic-height {
  align-self: end;
  color: #000;
  font-size: 12px;
  background: green;
}
<div class='box'>
  <div class='dynamic-height'>
    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.
  </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.