45

我需要创建一个 DIV wherewidth=height和height=100%viewport （显然，它是可变的）。

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

在我看来，这在 CSS 中应该很简单，但我已经坚持下去了！任何指针将不胜感激。

4

8 回答 8

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/

于 2013-08-02T15:48:19.387 回答
34

仅 CSS 解决方案：vh单位

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

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

例子：

body{margin:0;}

div{
    background:gold;
    height:100vh;
    width:100vh;
}
<div></div>

小提琴演示

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

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

于 2014-05-13T13:04:31.213 回答
17

您可以使用 jquery（或者如果您愿意，也可以使用纯 javascript）来做到这一点。

使用 jquery：

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

$(document).ready(function(){
  var height = $(window).height();
  $('#square').css('height', height);
  $('#square').css('width', height);
});
于 2011-07-14T13:46:47.003 回答
4

CSS3 有一种方法可以使用 vw（视口宽度）和 vh（视口高度）来执行此操作。使用这些度量，100vw 是视口的整个宽度，而 100vh 是整个高度。有关相对 css3 值和单位的更多信息，请点击此处。

在撰写本文时，唯一的支持是 Internet Explorer 9，因此这可能不是您想要的，但在未来的支持出现时要牢记这一点。

于 2011-07-14T14:27:30.897 回答
3

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

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

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

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

当然，对于页面上的任何文本，您还必须考虑到这一点（因为这个技巧会影响字体大小）

于 2011-12-23T15:45:25.603 回答
1

这很有趣...

对于那些可能正在寻找一种纯 CSS 方式来包含具有最大尺寸的正方形的人： div

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

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/

于 2019-01-21T20:55:49.737 回答
0

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

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

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

于 2011-07-14T13:43:46.020 回答
0

我不知道我是否正确，但如果你想将它设置为视口高度的 100%，你可以在 css 中轻松地做到这一点：

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

你可以在这里查看

于 2014-12-03T00:49:44.017 回答