css - 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 帖子）

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

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

Answer 2

这个问题高度等于动态宽度（CSS 流体布局）似乎有一个很好的 CSS-only 答案，来自 Nathan Ryan。还值得阅读他的答案下方的评论以获取更多解释。我希望这有帮助。

如果您发现解决方案过于复杂，则可能值得为您尝试实现的目标提供更多背景信息，以防有人有一个好的替代解决方案。