如何仅使用CSS获取元素的高度 [英] How can I get the height of an element using css only

问题描述

我们有很多选择来使用jQuery和JavaScript来获取元素的高度.

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

但是我们如何仅使用CSS来获得高度?

But how can we get the height using CSS only?

假设我有一个包含动态内容的div-因此它没有固定的高度:

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>

我想仅使用CSS将.dynamic-height的margin-top设置为等于(the height of the div - 10px)的值.

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.

如果我知道身高，可以使用CSS calc()函数.

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

我该怎么做?

推荐答案

不幸的是，不可能通过CSS "get" 来获取元素的高度，因为CSS不是返回任何内容的语言除了浏览器调整其样式的规则以外的其他数据.

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.

您的分辨率可以使用jQuery来实现，或者，您也可以使用CSS3的transform:translateY();规则进行伪造.

Your resolution can be achieved with jQuery, or alternatively, you can fake it with CSS3's transform:translateY(); rule.

如果我们假设您的目标div在这种情况下为200px高-这是否意味着您希望div的边距为190px?

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?

这可以通过使用以下CSS来实现:

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

在这种情况下，重要的是要记住，translateY(100%)会将有问题的元素向下移动其自身的总长度.

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.

如果伪造对您不起作用，那么您的下一个最佳选择就是实现一个jQuery脚本，为您添加正确的CSS.

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

这篇关于如何仅使用CSS获取元素的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！