From what I've seen in other answers, CSS viewport units can't be used in calc()
statements yet. What I would like to achieve is the following statement:
height: calc(100vh - 75vw)
Is there some workaround way I can achieve this using purely CSS even though the viewport units can't be used in the calc()
statement? Or just CSS and HTML? I know I can do it dynamically using javascript, but I'd prefer CSS.
Before I answer this, I'd like to point out that Chrome and IE 10+ actually supports calc with viewport units.
1) Start of by setting your height as 100vh.
2) With box-sizing set to border-box - add a padding-top of 75vw. This means that the padding will be part f the inner height.
3) Just offset the extra padding-top with a negative margin-top
div
{
/*height: calc(100vh - 75vw);*/
height: 100vh;
margin-top: -75vw;
padding-top: 75vw;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: pink;
}