我偶然发现了一个使用纯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/

仅CSS解决方案：vh单位

要使元素根据视口高度调整大小，可以使用vh单位：

• • vh：**视口高度的1/100。[来源MDN]
• • 示例：**

body{margin:0;}

div{
    background:gold;
    height:100vh;
    width:100vh;
}

<div></div>

• • 一个

这将使元素的宽度和高度等于视口的高度。
Bowser支持的vh单位是ie9+。更多信息在这里

你可以用jquery（或者如果你喜欢的话，也可以用纯javascript）来实现。
使用jquery：

<div id="square">
</div>

$(document).ready(function(){
  var height = $(window).height();
  $('#square').css('height', height);
  $('#square').css('width', height);
});

CSS3有一种使用vw（viewport width）和vh（viewport height）的方法。使用这些度量，100vw是viewport的整个宽度，100vh是整个高度。关于相对css3值和单位的更多信息，请点击此处。
然而，在撰写本文时，唯一的支持是Internet Explorer 9，因此这可能不是您正在寻找的，但在未来支持到来时，这是一个值得记住的东西。

我想出了一个额外的技巧来帮助部分解决这个问题，对于任何偶然发现这个页面的人来说......在页面的onload事件中运行以下代码：

$('body').css('font-size',$(window).height()/100)

这意味着css的“em”单位等于页面高度的100分之一--你现在可以在css文件中任意使用这个单位来调整任何项目相对于 windows 高度的大小。这比这里列出的其他解决方案更通用--而且最有可能的是，你想调整页面的所有元素来考虑 windows 高度。例如，如果你想创建一个正方形，你可以写：

#square{width:100em;height:100em}

当然，你也必须考虑到你页面上的任何文本（因为这个技巧会影响字体大小）

这很有趣...

对于那些可能正在寻找一种纯CSS方式来包含具有最大维度的squarediv的人：
这里的关键要点是，设置max-width和max-height时，将width和height设置为相反的值。

超文本标记语言

<div>
</div>

中央支助组

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;
}

实时运行示例：https://jsfiddle.net/resistdesign/szrv5o19/

你可以用Javascript得到屏幕大小，然后你可以相应地设置宽度和高度。

• 窗口.屏幕.宽度 * 和 * 窗口.屏幕.高度 * 应该有效。

然后，您可以使用这些信息并为要相应显示的页面生成少量CSS。

我不知道我是否理解正确，但是如果你想把它设置为视口高度的100%，你可以很容易地在css中做到这一点：

.stuff {
  background:#DDD;
  display:inline-block;
  height: 100vh;
  width : 100vh;
}

你可以查一下here