height: calc(100% + 60px);
Above code will failed, any clue how to add extra 60px to a height of 100% using LESS?
Asked
Active
Viewed 81 times
-1
-
This is valid CSS `calc`, there must be something else that causes this to fail. – Vivick Jun 16 '17 at 13:46
-
1How it's failing? Error, wrong calculation, style not applied? – Justinas Jun 16 '17 at 13:48
2 Answers
1
The height in percentage does not work properly every time. It will work fine if your parent have fix height (either in px, pt, view port unit).
Its better to use view port for height. If you are not aware of it, read the following article.
Kirk Beard
- 9,569
- 12
- 43
- 47
Shubham
- 285
- 2
- 15
1
LESS and CSS have a calc function. If you want to use the CSS calc function instead of LESS's, then you need to escape your equation. Like so:
height: calc(~"100% + 60px");
You can still pass LESS variables into this calc call. You need to encapsulate your variable with brackets though. Like so:
@padding-variable: 60px;
height: calc(~"100% + @{padding-variable}");
