How To Calculate CSS Height On The Fly Using Calc
erics, Posted March 25th, 2020 at 10:45:03am
I needed to use an iframe between a pre-defined header and footer that would auto-fill the full height on any size screen.
On a desktop, the combined height of the header + footer was 223px and for mobile was 157px, so below find the CSS example:
calc(100vh - 223px) – for desktop
calc(100vh - 157px) – for mobile
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
... <style> @media only screen and (max-device-width : 480px) { #theiframe { width: 100%; height: calc(100vh - 157px); margin: 0; padding: 5px; display: block; } } #theiframe { width: 100%; height: calc(100vh - 223px); margin: 0; padding: 5px; display: block; } </style> ... <nav> ... </nav> <div class="doccontent"> <iframe src="https://www.yourdomain.com" id="theiframe"></iframe> </div> <footer> ... </footer> ... |
See:
https://www.w3schools.com/cssref/css_units.asp
https://css-tricks.com/fun-viewport-units/
Categories: How-To's, Technology Auto, cacl(), Calc, CSS, Fly, Function, height, howto, html, On The Fly, tips
Leave Your Comment
All fields marked with "*" are required.