How css makes div highly adaptive

background & & question:
as shown in figure

add: I use

in the less file
div2{
    height:calc(100vh - 140px)
}

does not work, the view in the browser is calculated as-40vh.
but it"s easy to debug calc (100vh-140px) directly while browsing. What happened during less compilation?

Mar.28,2021

less is written incorrectly. It should be height:calc (~ "100vh-140px") , because less is calculated automatically, and adding ~ symbol prevents it from calculating.


calculation attribute: calc (100%-140px);

absolute positioning method:

div2{
    position:absolute;
    bottom:0;
    top:140px;
    left:0;
    right:0;
}

https://blog.csdn.net/linda_4.


https://codepen.io/vizocn/pen.

<div class="wrapper">
    <div class="d1"></div>
    <div class="d2"></div>
</div>
Menu