gpt4 book ai didi

html - 高度等于视口(viewport)的方形 DIV

转载 作者:技术小花猫 更新时间:2023-10-29 11:36:43 25 4
gpt4 key购买 nike

我需要创建一个 DIV,其中 width=height 和视口(viewport)的 height=100%(显然,它是可变的)。

换句话说,一个完全正方形的 DIV 根据视口(viewport)的高度计算它的尺寸。该 DIV 中的元素将采用其尺寸占父 DIV 高度和宽度的百分比。

在我看来,在 CSS 中 这应该很简单,但我一直坚持下去!任何指针将不胜感激。

最佳答案

我偶然发现了一个使用纯 css 的绝妙技巧:

#square {
width: 100%;
height: 0;
padding-bottom: 100%;
}

希望对您有所帮助。

http://blog.brianjohnsondesign.com/2013/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/

关于html - 高度等于视口(viewport)的方形 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6693956/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com