如何仅使用 css 获取元素的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44153866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I get the height of an element using css only
提问by Surya Raj M
We have a lot of options to get the height of an element using jQuery and JavaScript.
我们有很多选项可以使用 jQuery 和 JavaScript 获取元素的高度。
But how can we get the height using CSS only?
但是我们如何仅使用 CSS 获得高度呢？
Suppose, I have a div with dynamic content - so it does not have a fixed height:
假设，我有一个包含动态内容的 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>I want to set the margin-topof .dynamic-heightto a value which is equal to (the height of the div - 10px)using CSS only.
我想将margin-topof设置.dynamic-height为等于(the height of the div - 10px)仅使用 CSS的值。
If I get the height I can use CSS calc()function.
如果我得到高度，我可以使用 CSScalc()功能。
How do I do that?
我怎么做？
回答by Frits
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.
不幸的是，不可能通过 CSS “获取”元素的高度，因为 CSS 不是一种返回任何类型数据的语言，除了浏览器调整其样式的规则。
Your resolution can be achieved with jQuery, or alternatively, you can fake it with CSS3's transform:translateY();rule.
您可以使用 jQuery 来实现您的分辨率，或者您可以使用 CSS3 的transform:translateY();规则来伪造它。
The CSS Route
CSS 路由
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?
如果我们假设您在此实例中的目标 div 高 200 像素 - 这是否意味着您希望该 div 的边距为 190 像素？
This can be achieved by using the following CSS:
这可以通过使用以下 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.
在这种情况下，重要的是要记住，translateY(100%)将有问题的元素向下移动它自己的总长度。
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
jQuery 路由
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 脚本来为您添加正确的 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
});
});
});
回答by Jay Swarts
You could use the CSS calcparameter to calculate the height dynamically like so:
您可以使用 CSScalc参数来动态计算高度，如下所示：
.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>