CSS宽度100％高度

Question

Is it even possible to make my width 100% of height using only CSS? Without using Javascript or the like.

{
    width: /*100% of height*/
}

Answer 1

There are new css units for this

width: 100vh;

This means that the width of the element will be 100% of the viewport height.

CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin. One unit on any of the three values is 1% of the viewport axis. "Viewport" == browser window size == window object. If the viewport is 40cm wide, 1vw == 0.4cm.

1vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, whichever is smaller 1vmax = 1vw or 1vh, whichever is larger ( css-tricks post )

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/length

PS: Support for these new properties is actually quite good in modern browsers. See here

Answer 2

This question Height equal to dynamic width (CSS fluid layout) seems to have a good CSS-only answer by Nathan Ryan. It's also worth reading the comments below his answer for additional explanation. I hope this helps.

If you find the solution too complex, it might be worth giving more context to what you are trying to achieve in case someone has a good, alternative solution.