javascript 如何使 div 为设备屏幕高度的 10% css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25792296/
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
How to make div 10% of device screen height css
提问by Paulie_D
What I am looking for is a CSS equivalent of jQuery's $("div").css({"height":screen.height/10})
我正在寻找的是一个等效于 jQuery 的 CSS $("div").css({"height":screen.height/10})
I have heard of CSS media queries and I like them, but I don't know of anything that could even do something even close to that. I know how to use min-heightquery:
我听说过 CSS 媒体查询并且我喜欢它们，但我不知道有什么可以做甚至接近于此的事情。我知道如何使用min-height查询：
@media (min-height: ... /* some height */){
div{
height: ... /* 'some height' divided by ten */
}
}
but it only gets 10% height of the browser window (not what I'm looking for!).
但它只获得浏览器窗口的 10% 高度（不是我要找的！）。
And I can't just simply use height: 10%because the div is nested in another element that has a set height in pixels.
而且我不能只是简单地使用，height: 10%因为 div 嵌套在另一个以像素为单位设置高度的元素中。
I also can't use height: 10vhbecause the viewport's height is not at all the device screen's height (tested in Chrome and IE; If you want proof, resize the window. You'll notice that the height changes as the window's height changes)
我也无法使用，height: 10vh因为视口的高度根本不是设备屏幕的高度（在 Chrome 和 IE 中测试；如果你想证明，调整窗口大小。你会注意到高度随着窗口高度的变化而变化）
NOTE:
笔记：
I am asking that the div be 10% of the device screen, meaning that if the computer's monitor (the device screen) has a resolution of 1280px by 800px, then the div should be 10% of 800px, which is 80px. Also, if the window resizes, the div's height should not change, because even though the window is resizing, it is impossible to resize the physical computer monitor or phone screen
我要求 div 是设备屏幕的 10%，这意味着如果计算机的显示器（设备屏幕）的分辨率为 1280px x 800px，那么 div 应该是 800px 的 10%，即 80px。此外，如果窗口调整大小，div 的高度不应改变，因为即使窗口调整大小，也不可能调整物理计算机显示器或手机屏幕的大小
回答by Paulie_D
It's not entirely clear what you are referring to but there IS a CSS property for this.
不完全清楚你指的是什么，但有一个 CSS 属性。
It's the vertical height unit (vh)
它是垂直高度单位 (vh)
Each vhequates to 1% of the vertical height of the screen / viewport.
每个vh等于屏幕/视口垂直高度的 1%。
CSS
CSS
div {
background: red;
height:10vh;
}
CanIUsereference
CanI使用参考
MDNreference
MDN参考
回答by Paulie_D
You can use min-device-heightinstead of min-height:
您可以使用min-device-height代替min-height：
@media (min-device-height: ... /* some height of the screen*/){
div{
height: ... /* 'some height' divided by ten */
}
}
This also applies to the other dimensional queries such as:
这也适用于其他维度查询，例如：
min-width-> min-device-width
min-width-> min-device-width
height-> device-height
height-> device-height
width-> device-width
width-> device-width
for more visit Mozilla's guide for CSS queries.
如需更多信息，请访问Mozilla 的 CSS 查询指南。
回答by gilbert-v
Use window.innerHeight:
使用window.innerHeight：
document.getElementById([DIV ID]).style.height = (window.innerHeight / 10); // Gets window height.
window.onresize = function() { document.getElementById([DIV ID]).style.height = (window.innerHeight / 10);
See here: https://developer.mozilla.org/en-US/docs/Web/API/Window.innerHeight
看这里： https://developer.mozilla.org/en-US/docs/Web/API/Window.innerHeight
