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:

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

Canteen

I don't think this can be done with css only – Antiphonal

I could be wrong but could SASS, LESS or similar not help with that? – Bazluke

Maybe a simplistic remark, but doesn't padding: 5px 0; box-sizing: border-box; help you achieve the same? – Ravelin

Answer 1

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

Carrissa

Nice answer. I've used outerHeight() approach and it's working for me. Thanks! – Vertex

@TomaszDzięcielewski you're welcome! I'm glad it helped! – Carrissa

Answer 2

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>

Posticous

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.. – Korman

It simply won't work with entirely dynamic scenario as other suggested that CSS is not a language that return values. – Smuggle

How is that related to the question, which preciesly asks 'How can I get the height of an element using css only'? – Externalization

Answer 3

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)

Busily

The OP CLEARLY said CSS only – Inexpressive

Answer 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

Moravian

The OP CLEARLY said CSS only – Inexpressive

Answer 5

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>

Cymry