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的{{1}}设置为仅使用CSS等于.dynamic-height的值。

如果我得到高度，我可以使用CSS (the height of the div - 10px)函数。

我该怎么做？

Answer 1

不幸的是，不可能＆＃34;得到＆＃34;通过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 Route

如果伪造它不适合你，那么你的下一个最好的选择是实现一个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)

Answer 4

没有办法使用 css。但是，

我们可以使用一行 JavaScript 来实现它。

用于查找 div 的高度

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

用于查找 div 的宽度

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

如何仅使用css

4 个答案:

CSS路线

jQuery Route