Menu
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.
634
You can use calc() anywhere where you would use numeric values (e.g.: width, max-height, margin-left, …)
You can use the window. innerHeight property to get the viewport height, and the window. innerWidth to get its width. let viewportHeight = window.
Moving to relative units to express length and using vh and vw style settings lets you control the widths and heights of elements no matter the viewport size. You can also use percentage-based units, but keep in mind that they're based on the parent element, while vh and vw style units are based on the viewport.
To reiterate, VH stands for “viewport height”, which is the viewable screen's height. 100VH would represent 100% of the viewport's height, or the full height of the screen. And of course, VW stands for “viewport width”, which is the viewable screen's width.
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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
