html中的方形选择,html-方形DIV，其中高度等于viewp

html-方形DIV，其中高度等于viewp

我需要在视口(显然是可变的)的2987032228561561159168和2987032228561159159169处创建DIV。

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

在我看来，这在CSS中应该很简单，但是我已经被它卡住了！ 任何指针将不胜感激。

8个解决方案

117 votes

我偶然发现了一个使用纯CSS的巧妙技巧：

#square {

width: 100%;

height: 0;

padding-bottom: 100%;

}

希望有帮助。

[HTTP://blog.Brian Johnson design.com/2013/maintain-aspect-ratio-佛如-HTML-element-using-only-CSS-in-啊-responsive-design/]

Tomasz Kowalczyk answered 2020-07-28T23:25:59Z

31 votes

仅CSS解决方案：

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

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

例：

小提琴演示

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

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

web-tiki answered 2020-07-28T23:26:45Z

17 votes

您可以使用jquery(如果愿意，也可以使用纯JavaScript)进行此操作。

使用jQuery：

$(document).ready(function(){

var height = $(window).height();

$('#square').css('height', height);

$('#square').css('width', height);

});

Ant answered 2020-07-28T23:25:30Z

3 votes

CSS3有一种使用vw(视口宽度)和vh(视口高度)的方法。 使用这些度量，100vw是视口的整个宽度，而100vh是视口的整个高度。 有关相对css3值和单位的更多信息，请参见此处。

在撰写本文时，唯一的支持是对Internet Explorer 9的支持，因此这可能不是您所需要的，但是在以后的支持中要牢记一点。

Vap0r answered 2020-07-28T23:27:10Z

3 votes

我想出了另一种技巧，可以帮助部分绊倒这个页面的人解决该问题...在页面的onload事件中运行以下代码：

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

这意味着css“ em”单位等于页面高度的100分-您现在可以在css文件中任意使用此单位来调整相对于视口高度的任何项目的大小。 这比此处列出的其他解决方案更为通用-而且很可能您希望调整页面中所有元素的大小以考虑视口高度。 例如，如果您现在要创建正方形，则可以编写：

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

当然，您还必须考虑页面上的任何文本(因为此技巧会影响字体大小)

drcode answered 2020-07-28T23:27:39Z

0 votes

您可以使用Javascript并获取屏幕尺寸。 之后，您可以相应地设置宽度和高度。

window.screen.width和window.screen.height应该可以工作。

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

Daniel Szekely answered 2020-07-28T23:28:08Z

0 votes

我不知道我是否正确，但是如果您要将其设置为视口高度的100％，可以在CSS中轻松完成此操作：

.stuff {

background:#DDD;

display:inline-block;

height: 100vh;

width : 100vh;

}

你可以在这里查看

desto answered 2020-07-28T23:28:32Z

0 votes

这是有趣的...

对于那些可能希望使用纯CSS方式包含最大尺寸的正方形max-width的用户：

这里的关键要点是，您将max-width和max-height设置为width和height为相反的值。

的HTML

的CSS

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/]

Resist Design answered 2020-07-28T23:29:14Z