CODEWITHSUNDEEP
css
user5303752
user5303752

Reputation:

css height property as screenSize - 300px;

I want to create a div that has a height equal to the screen's height, minus 300px.

How can I do this in CSS without using JavaScript?

By "screen height" I mean the height of the view port, not the display itself.

Upvotes: 0

Views: 231

Answers (1)

user229044
user229044

Reputation: 239362

Use calc to make the element 100% the height of its container, minus 300px:

div {
  height: calc(100% - 300px)
}

If you were interested in the height of the viewport and not the containing element, you could use vh:

div {
   height: calc(100vh - 300px)
}

Upvotes: 4

Related Questions