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?

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.

Answer 2

#specificElement { height: calc(100vh - 100%); min-height: calc(100vh - 100px); }

set min height so that your dyanmic content should not get effect and give height in percentage for dymanic result.