Clever Geek Handbook

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

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

But how can we get the height using just CSS?

Let's say I have a div with dynamic content - so it doesn't 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>
Run codeHide result


I want to set margin-top

of .dynamic-height

to a value (the height of the div - 10px)

using CSS only.

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

.

How to do it?

+9


source to share


2 answers


Unfortunately, it is not possible to "get" the height of an element using CSS, because CSS is not a language that returns any data other than rules for the browser to style it.

Your resolution can be achieved with jQuery, or you can fake it with CSS3 transform:translateY();

CSS Route

If we assume that your target div in this case is 200px high - would that mean you want the div to have 190px headroom?

This can be achieved with 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 case, it is important to remember that this will translateY(100%)

move the element in question downward by its own total length.

The problem with this route is that it will not push the element below it as it would with a field.

JQuery Route

If spoofing doesn't work for you, then your next best bet will 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
        });
    });
});
+13


source


You can use the CSS calc parameter to calculate the height dynamically this way



.dynamic-height {
   color: #000;
   font-size: 12px;
   margin-top: calc(100% - 10px);
   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>
+4


source






More articles:


All Articles