How can I get height of any element using 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>
How can I get height of any element using LESS?
Example if I set <header> height = 100px, then this code is working
How can I get height of any element using 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>
How can I get height of any element using LESS?
Example if I set <header> height = 100px, then this code is working
- This is not possible in LESS. See this answer. – knuckfubuck Commented Aug 5, 2014 at 10:30
1 Answer
Reset to default 7Since LESS processes your styles BEFORE the CSS gets delivered and interpreted by the browser there is no way you can let it do the math after that. The information needed is rendered way later, so you will have to either include a JS to modify the DOM after loading or make JS build the section in the first place.