高度等于视口的方形 DIV

Posted 2023-03-05

【中文标题】高度等于视口的方形 DIV

【英文标题】：Square DIV where height is equal to viewport

【发布时间】：2011-10-05 08:33:03

【问题描述】：

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

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

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

【问题讨论】：

我认为使用 CSS 是不可能的。没有像width: height; 这样的方法。

@atlavis 是对的，你需要一些 javascript。

【参考方案1】：

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

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

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

【参考方案2】：

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

使用 jquery：

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

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

【讨论】：

糟糕，回车太快了。对于其他想知道的人，您还可以将宽度设为从高度计算的值，例如 (height*1.2) - 非常棒！现在要弄清楚当人们没有启用 javascript 时如何优雅地降级！

【参考方案3】：

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

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

【讨论】：

天哪，曾经做过。现在 [几乎] 每个主流浏览器都支持 vw 和 vh。 caniuse.com/#feat=mdn-api_css_vw

【参考方案4】：

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

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

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

#squarewidth:100em;height:100em

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

【参考方案5】：

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

【讨论】：

感觉超级笨拙，但到目前为止似乎工作 100%（哈哈）。 +1

这很有用，但不能满足原始问题的要求。这不会最大化元素的高度以填充视口。

@MKYung 这不是公认的答案，因为它没有回答问题。当明确要求相反设置宽度=高度时，此答案设置高度=宽度。

太糟糕了，如果想将它与 Bootstrap 混合使用它就不起作用。

@Werd 这不是问题的正确答案。正如问题所要求的那样，宽度不是根据高度计算的。如果您想根据元素的宽度保持纵横比，请参阅How to maintain the aspect ratio of a div using only CSS

【参考方案6】：

仅 CSS 解决方案：vh 单位

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

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

---

示例：

bodymargin:0;

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

<div></div>

Fiddle DEMO

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

---

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

【讨论】：

这正是我想要的！它比其他 CSS 解决方案要简单得多，并且不使用 JavaScript。

这是一个很酷的解决方案，所以 +1 但它有一个限制。对于宽度小于高度的纵向视口，width: 100vh 会将内容移出屏幕。它可能看起来很剪裁。

@MuhammadUsman 对于您的情况，您可以使用 vmin 单元。它是视口宽度和高度之间的最小值。

【参考方案7】：

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

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

您可以查看here

【参考方案8】：

这很有趣...

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

这里的关键点是您设置了max-width 和max-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/