如何仅使用css获取元素的高度

Question

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

但是我们怎样才能使用CSS获得高度？

假设,我有一个动态内容的div - 所以它没有固定的高度:

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

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

如果我得到高度我可以使用CSS calc()功能.

我怎么做？

Answer 1

不幸的是,不可能通过CSS"获取"元素的高度,因为CSS不是一种返回除浏览器规则以外的任何类型数据以调整其样式的语言.

您可以使用jQuery实现解决方案,或者您可以使用CSS3伪造它 transform:translateY();

CSS路线

如果我们假设你的目标div在这个例子中是200px高 - 这意味着你希望div有190px的余量？

这可以通过使用以下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%)将有问题的元素向下移动总共它自己的长度.

这条路线的问题在于它不会将低于它的元素推到一边,而边缘就是这样.

jQuery路由

如果伪造它不适合你,那么你的下一个最好的选择是实现一个jQuery脚本来为你添加正确的CSS.

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

Answer 2

您可以像这样使用CSS calc参数动态计算高度

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

Answer 3

最简单和最快的解决方案是在 chrome 开发者控制台中尝试 vanilla(plain) Javascript 来计算任何元素的高度或宽度，只需将任何元素的“id”放入其中并进行计算：

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

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