CODEWITHSUNDEEP
htmlcss
ShibinRagh
ShibinRagh

Reputation: 6656

How to set the height which depends on window height using css calc()

This is my css - see the height property 

header{
   position:fixed;
   height:50px
}
.block{
   height: calc(100vh - (50px));
}

I am getting the result on website

see attachment .

.block{
   height: calc(50vh);
}

Upvotes: 0

Views: 461

Answers (1)

Thomas Vercamer
Thomas Vercamer

Reputation: 11

First off, I don't think you need the brackets around the 50px,
CSS is capable of doing the math without those.

More to the point:
calc is a rather new technology, still in the experimental phase.
So not every browser will support it.

You might want to use the browser prefixes (-moz- and -webkit-) to continue your experiment.

Also, you should probably take a look at this page:
https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Upvotes: 1

Related Questions