CSS宽度100%高度

Question

是否甚至可以仅使用CSS使我的宽度达到100%的高度？不使用Javascript等.

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

Answer 1

有新的css单位

width: 100vh;

这意味着元素的宽度将是视口高度的100%.

CSS3有一些新值可用于调整与当前视口大小相关的内容:vw,vh和vmin.三个值中的任何一个上的一个单位是视口轴的1%."视口"==浏览器窗口大小==窗口对象.如果视口宽40厘米,1vw == 0.4厘米.

1vw =视口宽度的1%1vh =视口高度的1%1vmin = 1vw或1vh,取较小的1vmax = 1vw或1vh,取较大者(css-tricks post)

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

PS:在现代浏览器中,对这些新属性的支持实际上相当不错.看这里