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>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3ec95-2c45a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3ec95-2c45a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?