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

时间:2011-07-14 13:32:28

标签: html css aspect-ratio css-shapes

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

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

在我看来,在CSS 中做应该很简单,但我已经陷入困境了!任何指针都会非常感激。

8 个答案:

答案 0 :(得分:117)

我偶然发现了一个使用纯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/

答案 1 :(得分:31)

仅CSS解决方案:vh单位

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

  

vh:视口高度的1/100。 [source MDN]


示例:



body{margin:0;}

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

<div></div>
&#13;
&#13;
&#13;

<强> Fiddle DEMO

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


Bowser对vh单位的支持是IE9 +。更多信息here

答案 2 :(得分:17)

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

使用jquery:

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

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

答案 3 :(得分:3)

CSS3有一种方法可以使用vw,视口宽度和视口高度vh来实现。使用这些度量,100vw是视口的整个宽度,100vh是整个高度。有关相对css3值和单位here的更多信息。

在编写本文时,唯一的支持是Internet Explorer 9,因此这可能不是您正在寻找的内容,但在未来的支持随之而来时,请记住这一点。

答案 4 :(得分:3)

我想出了一个额外的技巧来帮助解决这个问题,对于任何偶然发现此页面的人...在页面的onload事件中运行以下代码:

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

这意味着css“em”单位等于页面高度的100倍 - 您现在可以在css文件中任意使用它来调整相对于视口高度的任何项目。这比这里列出的其他解决方案更通用 - 并且您很可能希望确定所有页面元素的大小以考虑您的视口高度。例如,如果你现在想要创建你的方块,你可以写:

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

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

答案 5 :(得分:0)

您可以使用Javascript并获取屏幕大小。之后你可以相应地设置宽度和高度。

window.screen.width window.screen.height 应该有效。

然后,您可以使用此信息并生成一小部分CSS,以便相应地显示页面。

答案 6 :(得分:0)

我不知道我是否正确,但如果你想将它设置为视口高度的100%,你可以在css中轻松完成:

.stuff {
  background:#DDD;
  display:inline-block;
  height: 100vh;
  width : 100vh;
}

您可以查看here

答案 7 :(得分:0)

这很有趣...

对于那些可能希望使用纯CSS方法包含最大尺寸的正方形 div的人:

  

这里的关键要点是,您将max-widthmax-height设置为相反的值时,同时设置了widthheight

HTML

<div>
</div>

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/