Where does 100% in expression come from

height: calc(100%-65px);

From the height of the parent? And if the height of the parent is not explicitly specified?

  • one
    if not explicitly specified, then it is initial , tobish by default. And what is the default height for someone depends on the element. - SLy_huh

1 answer 1

First, inside the calc() function, the type will be cast - from <percentage> to <length> , then the expression will be calculated. If the element has a position property value other than absolute and the parent does not explicitly specify the height, height will inherit the auto value and the result of the function will be auto .

If the element has position: absolute , then its height will be equal to 100% of the height of the nearest position: relative parent minus 65 pixels.

If the nearest parent with position: relative is not found, the height will be calculated from the height of the body .

 .container { width: 100px; display: inline-block; vertical-align: top; } .container-setheight { height: 200px; } .container-noheight { height: auto; } .container-abs { position: relative; } .container-abs-abs { } .first { height: 10px; background-color: aliceblue; } .second { height: calc(100% - 10px); background-color: yellow; } .container-abs .second, .container-abs-abs .second { position: absolute; } 
 <div class="container container-setheight"> Высота задана = 200 пикселей <div class="first"></div> <div class="second">calc(100% - 10px)</div> </div> <div class="container container-noheight"> Высота не задана<br> position: static; + position: static; <div class="first"></div> <div class="second">calc(100% - 10px)</div> </div> <div class="container container-abs"> Высота не задана<br> position: relative; + position: absolute; <div class="first"></div> <div class="second">calc(100% - 10px)</div> </div> <div class="container container-abs-abs"> Высота не задана<br> position: static; + position: absolute; <div class="first"></div> <div class="second">calc(100% - 10px)</div> </div>