如何使用 LESS 获取任何元素的高度?
<html>
<head>
<title></title>
<style>
html, body {
height: 100%;
}
header {
height: auto;
text-align: center;
background: red;
}
@windowHeight: `$(window).height()`;
@headerHeight: `$('header').height()`; /* NOT WORKING */
@sectionHeight: @windowHeight - @headerHeight;
section {
height: ~'@{sectionHeight}px';
text-align: center;
background: green;
}
</style>
</head>
<body>
<header>TITLE<header>
<section>TEXT</section>
</body>
</html>
如何使用 LESS 获取任何元素的高度?
示例,如果我设置 <header>
height = 100px
, 那么这段代码就可以工作了
最佳答案
由于 LESS 在 CSS 被浏览器传递和解释之前处理您的样式,因此您无法让它在此之后进行数学运算。所需的信息稍后呈现,因此您必须包含一个 JS 以在加载后修改 DOM,或者让 JS 首先构建该部分。
关于javascript - 如何使用 LESS 获取任何元素的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25136500/