Can you use CSS calc() function to make the height of an element match its width? My attempt is not working

css height calc
RiverOceanSea picture RiverOceanSea · Feb 3, 2018 · Viewed 9.1k times · Source

The calc() function is not working as I expected it to in my code.

Instead of the height being calculated to 20% of the container's width, the height is collapsing.

html:

I've tried adding a calculation, like "height: calc(20% - 0px);" but the height is still just collapsing to zero.

Can anyone see if I am doing something wrong? Thanks!

Answer

user10199185 picture user10199185 · Aug 8, 2018

just put 

height:0; padding-top:100%;

The padding is taking it's calculations from the width of the element.

Related questions

css element height minus height of a element with changing height

aye folks! is it possible to have dynamic height calculation with css3? i couldn't find anything.. but maybe i'm just using the wrong terms for my search. the problem: i have a site where i want to include an iframe …

Read More
How to make a div 100% height of the browser window

I have a layout with two columns - a left div and a right div. The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now …

Read More
Make body have 100% of the browser height

I want to make body have 100% of the browser height. Can I do that using CSS? I tried setting height: 100%, but it doesn't work. I want to set a background color for a page to fill the entire browser window, …

Read More