方形DIV,其中高度等于视口

Question

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

换句话说,一个完美的方形DIV,它根据视口的高度计算它的尺寸.该DIV中的元素将其尺寸作为父DIV的高度和宽度的百分比.

在我看来,在CSS中这应该很简单,但我已经坚持了!任何指针都将非常感激.

Answer 1

使用纯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/

Answer 2

CSS唯一的解决方案:vh单位

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

vh:视口高度的1/100.[ 来源MDN ]

例:

body{margin:0;}

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

<div></div>

小提琴演示

这将使元素的宽度和高度等于视口的高度.

Bowser对vh单元的支持是IE9 +.更多信息在这里

Answer 3

你可以用jquery(或者你喜欢的纯javascript)来做到这一点.

使用jquery:

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

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