我需要创建一个DIV，其中width=height 和height=100% 的视口（显然是可变的）。
换句话说，一个完美的正方形 DIV，它根据视口的高度计算其尺寸。该 DIV 中的元素将采用其尺寸作为父 DIV 的高度和宽度的百分比。
在我看来，在 CSS 中应该很简单，但我已经被它困住了！任何指针将不胜感激。
【问题讨论】：
width: height; 这样的方法。
标签： html css aspect-ratio css-shapes
您可以使用 Javascript 并获取屏幕大小。之后，您可以相应地设置宽度和高度。
window.screen.width 和 window.screen.height 应该可以工作。
然后，您可以使用此信息并生成一点点 CSS，以便相应地显示页面。
【讨论】：
您可以使用 jquery（如果您愿意，也可以使用纯 javascript）来做到这一点。
使用 jquery：
<div id="square">
</div>
$(document).ready(function(){
var height = $(window).height();
$('#square').css('height', height);
$('#square').css('width', height);
});
【讨论】：
CSS3 可以使用 vw（视口宽度）和 vh（视口高度）来执行此操作。使用这些度量，100vw 是视口的整个宽度，而 100vh 是整个高度。有关 css3 相对值和单位的更多信息here。
在撰写本文时，唯一的支持是 Internet Explorer 9，因此这可能不是您想要的，但在未来支持时请牢记这一点。
【讨论】：
我想出了一个额外的技巧来帮助部分解决这个问题，对于任何偶然发现这个页面的人......在页面的 onload 事件中运行以下代码：
$('body').css('font-size',$(window).height()/100)
这意味着 css “em” 单位等于页面高度的 100 - 您现在可以在 css 文件中任意使用它来调整相对于视口高度的任何项目的大小。这比此处列出的其他解决方案更通用 - 并且很可能您希望调整页面元素的大小以考虑您的视口高度。例如，如果你现在想创建你的正方形，你可以写：
#square{width:100em;height:100em}
当然，对于页面上的任何文本，您还必须考虑到这一点（因为这个技巧会影响字体大小）
【讨论】：
我偶然发现了一个使用纯 css 的巧妙技巧：
#square {
width: 100%;
height: 0;
padding-bottom: 100%;
}
希望对您有所帮助。
【讨论】：
vh 单位要根据视口的高度调整元素的大小，您可以使用 vh 单位：
vh : 视口高度的 1/100。 [source MDN]
示例：
body{margin:0;}
div{
background:gold;
height:100vh;
width:100vh;
}<div></div>这将使元素的宽度和高度等于视口的高度。
对 vh 单位的 Bowser 支持是 IE9+。更多信息here
【讨论】：
width: 100vh 会将内容移出屏幕。它可能看起来很剪裁。
我不知道我是否正确，但如果你想将它设置为视口高度的 100%，你可以在 css 中轻松地做到这一点：
.stuff {
background:#DDD;
display:inline-block;
height: 100vh;
width : 100vh;
}
您可以查看here
【讨论】：
对于那些可能正在寻找一种纯 CSS 方式来包含具有最大尺寸的 square div 的人：
这里的关键点是您设置了
max-width和max-height，同时将width和height设置为相反的值。
HTML
<div>
</div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
div {
background-color: red;
width: 100vh;
height: 100vw;
max-width: 100vw;
max-height: 100vh;
}
【讨论】：