Make DIV max-height equal to `window height - 100px`

Question

There is a way to set max-height in %, but is here any way to set DIV max-height, so it would be 100px smaller than window height with only CSS?

It must not be a fixed layout, user must be able to scroll page vertically, but DIV always should be resized to window height - 100px. Is this possible, or will I have to use JS for that?

Answer 1

Yes:

#specificElement {     height: calc(100vh - 100px);     box-sizing: border-box; } 

This uses the CSS calc() function to subtract 100px from 100vh (1vh being one percent of the view-port's height) and uses the result as the value of the height property.

The box-sizing forces the browser to include padding, and borders, in the calculated height of the element.

Obviously use a relevant selector for your use-case.

References:

• calc().
• CSS lengths.