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>

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

示例如果我设置了<header> height = 100px，则此代码正常运行

Answer 1

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

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

1 个答案: