Menu
I need to create a DIV where width=height, and height=100% of the viewport (which, obviously, is variable).
In other words, a perfectly square DIV that calculates it's dimensions based on the height of the viewport. Elements within that DIV will take their dimensions as percentages of the parent-DIV's height & width.
It seems to me like this should be simple to do in CSS, but I've gotten stuck with it! Any pointers would be much appreciated.
511
The correct way is to use the vh and vw units: vh: 1/100th of the height of the viewport. vw: 1/100th of the width of the viewport. As such, giving the element you wish to be 100% as high as the viewport a height setting of 100vh will give you what you're after.
Answer: Set the 100% height for parents too And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
You can use the window. innerHeight property to get the viewport height, and the window. innerWidth to get its width. let viewportHeight = window.
There is a neat trick using pure css that i stumbled upon:
#square { width: 100%; height: 0; padding-bottom: 100%; } Hope that helps.
http://blog.brianjohnsondesign.com/2013/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/
59
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
