Html 方形 DIV，其中高度等于视口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6693956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Square DIV where height is equal to viewport
提问by Ila
I need to create a DIV where width=height, and height=100%of the viewport (which, obviously, is variable).
我需要创建一个 DIV wherewidth=height和height=100%视口（显然，这是可变的）。
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.
换句话说，一个完美的方形 DIV，它根据 viewport 的高度计算其尺寸。该 DIV 中的元素将采用它们的尺寸作为父 DIV 高度和宽度的百分比。
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.
在我看来，这在 CSS 中应该很简单，但我已经被它卡住了！任何指针将不胜感激。
采纳答案by Ant
You can do this with jquery (or pure javascript if you prefer).
您可以使用 jquery（如果您愿意，也可以使用纯 javascript）来做到这一点。
With jquery:
使用 jquery：
<div id="square">
</div>
$(document).ready(function(){
var height = $(window).height();
$('#square').css('height', height);
$('#square').css('width', height);
});
回答by Tomasz Kowalczyk
There is a neat trick using pure css that i stumbled upon:
我偶然发现了一个使用纯 css 的巧妙技巧：
#square {
width: 100%;
height: 0;
padding-bottom: 100%;
}
Hope that helps.
希望有帮助。
回答by web-tiki
CSS only solution : vhunits
仅 CSS 解决方案：vh单位
To make the element resize according to the height of the viewportyou can use vh units :
要根据视口的高度调整元素大小，您可以使用 vh 单位：
vh :1/100th of the height of the viewport. [source MDN]
vh ：视口高度的 1/100。[来源 MDN]
Example:
例子：
body{margin:0;}
div{
background:gold;
height:100vh;
width:100vh;
}<div></div>This will make the width and height of the element equal to the height of the viewport.
这将使元素的宽度和高度等于视口的高度。
Bowser support for vh units is IE9+. More info here
Bowser 对 vh 单位的支持是 IE9+。更多信息在这里
回答by Vap0r
CSS3 has a way of doing this using vw, viewport width, and vh, viewport height. Using these measures, 100vw is the entire width of the viewport, and 100vh is the entire height. More information about relative css3 values and units here.
CSS3 有一种使用 vw（视口宽度）和 vh（视口高度）来做到这一点的方法。使用这些度量，100vw 是视口的整个宽度，100vh 是整个高度。有关相对 css3 值和单位的更多信息，请点击此处。
As of writing this, the only support however is for Internet Explorer 9, so this is probably not what you're looking for, but is something good to keep in mind when future support follows.
在撰写本文时，唯一的支持是对 Internet Explorer 9 的支持，因此这可能不是您要寻找的，但在未来的支持之后要记住这一点。
回答by drcode
One additional trick I came up with to help partially solve this problem, for anybody who stumbles across this page... Run the following code in your page's onload event:
我想出了一个额外的技巧来帮助部分解决这个问题，对于任何偶然发现这个页面的人......在页面的 onload 事件中运行以下代码：
$('body').css('font-size',$(window).height()/100)
This means the css "em" unit is equal to 100th of your page height- You can now arbitrarily use this in your css file to size any item relative to your viewport height. This is more generic than the other solutions listed here- And most likely you want to size allof the elements of your page to take into account your viewport height. For instance, if you now want to create your square you can just write:
这意味着 css “em” 单位等于页面高度的 100 - 您现在可以在 css 文件中任意使用它来调整与视口高度相关的任何项目的大小。这比此处列出的其他解决方案更通用 - 并且很可能您希望调整页面的所有元素的大小以考虑您的视口高度。例如，如果你现在想创建你的正方形，你可以这样写：
#square{width:100em;height:100em}
Of course, you'll also have to take this into account for any text on your page (since this trick affects the font size)
当然，对于页面上的任何文本，您还必须考虑到这一点（因为此技巧会影响字体大小）
回答by Daniel Szekely
You could use Javascript and get the screen size. After which you could set width and height accordingly.
您可以使用 Javascript 并获取屏幕大小。之后，您可以相应地设置宽度和高度。
window.screen.width, and window.screen.heightshould work.
window.screen.width和window.screen.height应该可以工作。
You could then use this information and generate a tiny bit of CSS for the page to be displayed accordingly.
然后，您可以使用此信息并为要相应显示的页面生成一点 CSS。
回答by desto
I don't know if I'm getting this right, but if you want to set it to 100% oh the height of the viewport, you could easily do this in css:
我不知道我是否理解正确，但是如果您想将其设置为 100% 哦视口的高度，您可以轻松地在 css 中执行此操作：
.stuff {
background:#DDD;
display:inline-block;
height: 100vh;
width : 100vh;
}
You could check it out here
你可以在这里查看
回答by Resist Design
This is interesting...
这很有趣...
For those who may be looking for a pure CSS way to contain a squaredivwith the maximum dimensions:
对于那些可能正在寻找一种纯 CSS 方式来包含具有最大尺寸的正方形div的人：
The key takeaway here is that you set
max-widthandmax-heightwhile settingwidthandheightto the opposite values.
这里的关键要点是您设置
max-width和max-height时设置width和height到相反的值。
HTML
HTML
<div>
</div>
CSS
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;
}
Live running example:https://jsfiddle.net/resistdesign/szrv5o19/
