Javascript 如何将 div 高度设置为用户显示器分辨率的 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5176379/
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 set div height to 100% of user's monitor resolution?
提问by Jacob
height: 100%in CSS obviously doesn't work. So is there any other CSS or JavaScript/jQuery solutions to this problem? Please advise.
height: 100%在 CSS 中显然不起作用。那么这个问题还有其他的 CSS 或 JavaScript/jQuery 解决方案吗？请指教。
回答by Blender
'Let's say your problem element is a <div>. If you make sure your <div>s height has something to reference to, almost all your problems will disappear:
'假设您的问题元素是<div>. 如果你确定你<div>的身高有参考价值，你几乎所有的问题都会消失：
#my_div
{
height: 100%; /* Won't work. What is 100% of an unknown/unset value? */
}
Make sure the <div>'s parents have a set height too. I usually do this (well, not exactly, but you get the idea):
确保<div>的父母也有一个设定的高度。我通常这样做（嗯，不完全是，但你明白了）：
#my_div, #parent_of_the_div, body, html
{
height: 100%; /* This works, but it will show scrollbars if the body
or html elements have padding or margins. */
}
回答by Melv
So you want a div to be the height of the screen? It's kind of non-obvious, but css height is the correct approach. The trick is you need to have the html and body elements also take up the full height of the page, otherwise the div is taking up 100% of nothing. The best way I've found to do this is:
所以你想让一个 div 成为屏幕的高度？这有点不明显，但 css height 是正确的方法。诀窍是你需要让 html 和 body 元素也占据页面的整个高度，否则 div 将 100% 不占据任何东西。我发现这样做的最好方法是：
html {
height: 100%;
}
body {
height: 100%;
}
#contentDiv {
min-height: 100%;
}
回答by saghar.fadaei
No Javascript required,becouse CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin
不需要 Javascript，因为 CSS3 有一些新的值来调整相对于当前视口大小的东西：vw、vh 和 vmin
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
so you can write it on your style :
所以你可以把它写成你的风格：
#contentDiv {
height: 100vh;
}
回答by Mario Gonzales Flores
Pure css
纯CSS
#container {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
Good Luck
祝你好运
Or javacript Jquery:
或 javacript Jquery：
Ready (not innerHeight in ie8):
准备好（不是ie8中的innerHeight）：
$(document).ready( function(){
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});
resize window :
调整窗口大小：
$(window).resize(function() {
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});
回答by jonwayne
With jQuery, you could use:
使用 jQuery，您可以使用：
$('div.class').css('height', $(window).height()+'px');
回答by Hani Masoud
There are a few options you may find useful:
有几个选项可能对您有用：
vh (viewport height)
vw (viewport width)
vmin (viewport minimum length)
vmax (viewport maximum length)
#container{
height: 100vh;
background: black;
}
回答by thefreeman
My answer builds on jonwayne's because there wasn't much explanation.
我的回答建立在 jonwayne 的基础上，因为没有太多解释。
You cannot use css to get the value of a users monitor, but you can do it via javascript. So the trick is to add javascript to the page load event which will set the height based on the browser window height. Using jQuery, you can do this with the following snippet
您不能使用 css 来获取用户监视器的值，但您可以通过 javascript 来实现。所以诀窍是将 javascript 添加到页面加载事件，它将根据浏览器窗口的高度设置高度。使用 jQuery，您可以使用以下代码段执行此操作
// jquery shorthand for onLoad event
$(function() {
// Set the css height property of #div_to_resize to the css
// height property of the browser window
$('#div_to_resize').css('height',$(window).css('height'));
}
You can also optionally attach to the resize event of the browser to reset the height if the window is resized. Combined with the previous snippet it would be
您还可以选择附加到浏览器的调整大小事件以在调整窗口大小时重置高度。结合上一个片段，它将是
// We extracted this to a function since we reference it more then once
function matchHeight() {
$('#div_to_resize').css('height',$(window).height);
}
// jQuery shorthand for document.onload
$(function() {
matchHeight();
//On the resize event, call matchHeight()
$(window).resize(matchHeight);
});
回答by Rasika
I don't think you can get the monitor's resolution with any web technology. What you an do is use Javascript to get the browser's height and set the height property of div in the css. This postmight help for getting the height.
我认为您无法通过任何网络技术获得显示器的分辨率。您要做的是使用Javascript获取浏览器的高度并在css中设置div的高度属性。这篇文章可能有助于获得高度。
