方形DIV，其中height等于视口 [英] Square DIV where height is equal to viewport

问题描述

我需要创建一个DIV，其中 width = height 和 height = 100％ ，显然，是可变的）。

I need to create a DIV where width=height, and height=100% of the viewport (which, obviously, is variable).

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

In other words, a perfectly square DIV that calculates it's dimensions based on the height of the viewport. Elements within that DIV will take their dimensions as percentages of the parent-DIV's height & width.

在我看来，这应该很容易在在CSS ，但我已经陷入了它！

It seems to me like this should be simple to do in CSS, but I've gotten stuck with it! Any pointers would be much appreciated.

推荐答案

您可以使用jquery（如果你喜欢纯粹的javascript）。

You can do this with jquery (or pure javascript if you prefer).

使用jquery：

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

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

这篇关于方形DIV，其中height等于视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！