如何使用LESS获得任何元素的高度？

Question

如何使用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>

Run Code Online (Sandbox Code Playgroud)

如何使用LESS获得任何元素的高度？

如果我设置了示例<header> height = 100px,则此代码正常工作

Answer 1

小智 6

由于LESS在浏览器交付和解释CSS之前处理您的样式,因此在此之后您无法让它进行数学运算.所需的信息将在稍后呈现,因此您必须在加载后包含一个JS来修改DOM,或者首先使JS构建该部分.

归档时间：	11 年，8 月前
查看次数：	3556 次
最近记录：	11 年，8 月前