我需要创建一个DIV，其中width=height和height=100%视口（显然是可变的）。
换句话说，一个完美的方形DIV，根据视口的高度计算它的尺寸 。 DIV中的元素将其尺寸作为父DIV高度和百分比的百分比。宽度。
在我看来，在CSS 中做应该很简单，但我已经陷入困境了！任何指针都会非常感激。
答案 0 :(得分：117)
我偶然发现了一个使用纯CSS的巧妙技巧：
#square {
width: 100%;
height: 0;
padding-bottom: 100%;
}
希望有所帮助。
答案 1 :(得分：31)
vh单位要根据视口的高度调整元素大小，可以使用vh单位：
vh：视口高度的1/100。 [source MDN]
示例：
body{margin:0;}
div{
background:gold;
height:100vh;
width:100vh;
}<div></div>
<强> Fiddle DEMO
这将使元素的宽度和高度等于视口的高度。
Bowser对vh单位的支持是IE9 +。更多信息here
答案 2 :(得分：17)
你可以用jquery（或者你喜欢的纯javascript）来做到这一点。
使用jquery：
<div id="square">
</div>
$(document).ready(function(){
var height = $(window).height();
$('#square').css('height', height);
$('#square').css('width', height);
});
答案 3 :(得分：3)
CSS3有一种方法可以使用vw，视口宽度和视口高度vh来实现。使用这些度量，100vw是视口的整个宽度，100vh是整个高度。有关相对css3值和单位here的更多信息。
在编写本文时，唯一的支持是Internet Explorer 9，因此这可能不是您正在寻找的内容，但在未来的支持随之而来时，请记住这一点。
答案 4 :(得分：3)
我想出了一个额外的技巧来帮助解决这个问题，对于任何偶然发现此页面的人...在页面的onload事件中运行以下代码：
$('body').css('font-size',$(window).height()/100)
这意味着css“em”单位等于页面高度的100倍 - 您现在可以在css文件中任意使用它来调整相对于视口高度的任何项目。这比这里列出的其他解决方案更通用 - 并且您很可能希望确定所有页面元素的大小以考虑您的视口高度。例如，如果你现在想要创建你的方块，你可以写：
#square{width:100em;height:100em}
当然，您还必须考虑到页面上的任何文字（因为这个技巧会影响字体大小）
答案 5 :(得分：0)
您可以使用Javascript并获取屏幕大小。之后你可以相应地设置宽度和高度。
window.screen.width 和 window.screen.height 应该有效。
然后，您可以使用此信息并生成一小部分CSS，以便相应地显示页面。
答案 6 :(得分：0)
我不知道我是否正确，但如果你想将它设置为视口高度的100％，你可以在css中轻松完成：
.stuff {
background:#DDD;
display:inline-block;
height: 100vh;
width : 100vh;
}
您可以查看here
答案 7 :(得分：0)
对于那些可能希望使用纯CSS方法包含最大尺寸的正方形 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;
}