CODEWITHSUNDEEP
css
Silver Light
Silver Light

Reputation: 45922

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

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?

Upvotes: 35

Views: 76794

Answers (2)

Sami Khan
Sami Khan

Reputation: 1

#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.

Upvotes: -1

David Thomas
David Thomas

Reputation: 253318

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:

Upvotes: 91

Related Questions