Square DIV的高度等于视口
我需要创build一个DIV width=height ， height=100%的视口（显然，是可变的）。
换句话说，一个完美的正方形DIV 根据视口的高度来计算它的尺寸。 该DIV中的元素将其尺寸作为父DIV的高度和宽度的百分比。
在我看来，这在CSS中应该很简单，但是我一直坚持下去！ 任何指针将不胜感激。
你可以用jQuery（或者纯JavaScript）来做到这一点。
用jquery：
<div id="square"> </div> $(document).ready(function(){ var height = $(window).height(); $('#square').css('height', height); $('#square').css('width', height); });
使用纯CSS的巧妙方法是我偶然发现的：
#square { width: 100%; height: 0; padding-bottom: 100%; }
希望有所帮助。
CSS唯一的解决scheme： vh单位
要使元素根据视口的高度来resize，可以使用vh单位：
vh：视口高度的1/100。 [ 源MDN ]
例：
body{margin:0;} div{ background:gold; height:100vh; width:100vh; }
<div></div>
CSS3有一个使用vw，viewport width和vh，视口高度的方法。 使用这些措施，100vw是视口的整个宽度，100vh是整个高度。 有关相关css3值和单位的更多信息。
在撰写本文时，唯一支持的就是Internet Explorer 9，所以这可能不是您正在寻找的内容，但在将来的支持遵循时，请记住这一点。
我想出了一个额外的技巧来帮助部分解决这个问题，任何人都在这个页面上绊倒…在页面的onload事件中运行以下代码：
$('body').css('font-size',$(window).height()/100)
这意味着css“em”单位等于页面高度的100％ – 现在，您可以在css文件中随意使用这个来调整相对于您的视口高度的任何项目。 这是比这里列出的其他解决scheme更通用 – 而且很可能您想要调整页面的所有元素以考虑您的视口高度。 例如，如果你现在想创build你的广场，你可以写：
#square{width:100em;height:100em}
当然，你也必须考虑到你的页面上的任何文字（因为这个技巧会影响字体大小）
你可以使用Javascript，并获得屏幕大小。 之后，您可以相应地设置宽度和高度。
window.screen.width ，和window.screen.height应该工作。
然后，您可以使用这些信息并生成一小部分CSS，以便相应地显示页面。
我不知道如果我得到这个权利，但如果你想将它设置为100％哦视口的高度，你可以很容易地在CSS中做到这一点：
.stuff { background:#DDD; display:inline-block; height: 100vh; width : 100vh; }
你可以在这里查看
