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

问题描述

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

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

在我看来，在 CSS 中应该很容易做到这一点，但我已经被它卡住了！任何指针将不胜感激.

解决方案

您可以使用 jquery(或纯 javascript，如果您愿意)来做到这一点.

使用 jquery:

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

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

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.

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.

解决方案

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

With jquery:

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

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

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