JavaScript - 获取浏览器高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3333329/
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
JavaScript - Get Browser Height
提问by JasonS
I am looking for a code snippet to get the height of the viewable area within a browser window.
我正在寻找一个代码片段来获取浏览器窗口中可视区域的高度。
I had this code, however it is somewhat bugged as if the the body doesn't exceed the height the of the window then it comes back short.
我有这个代码，但是它有点问题，好像身体没有超过窗口的高度然后它变短了。
document.body.clientHeight;
I have tried a couple of other things but they either return NaN or the same height as the above.
我尝试了其他一些东西，但它们要么返回 NaN 要么返回与上述相同的高度。
Does anyone know how to get the real height of the browsing window?
有谁知道如何获得浏览窗口的真实高度？
回答by meder omuraliev
You'll want something like this, taken from http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
你会想要这样的东西，取自http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
window.alert( 'Width = ' + myWidth );
window.alert( 'Height = ' + myHeight );
}
So that's innerHeightfor modern browsers, documentElement.clientHeightfor IE, body.clientHeightfor deprecated/quirks.
所以这innerHeight适用于现代浏览器，documentElement.clientHeightIE，body.clientHeight弃用/怪癖。
回答by Doc B PHP
Try using jquery:
尝试使用 jquery：
window_size = $(window).height();
回答by Gabriele Petrioli
You can use the window.innerHeight
您可以使用 window.innerHeight
回答by techdude
The way that I like to do it is like this with a ternary assignment.
我喜欢这样做的方式是使用三元赋值。
var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
I might point out that, if you run this in the global context that from that point on you could use window.height and window.width.
我可能会指出，如果你在全局上下文中运行它，从那时起你可以使用 window.height 和 window.width。
Works on IE and other browsers as far as I know (I have only tested it on IE11).
据我所知，可以在 IE 和其他浏览器上工作（我只在 IE11 上测试过）。
Super clean and, if I am not mistaken, efficient.
超级干净，如果我没记错的话，效率很高。
回答by Taufik Nurrohman
This should works too. First create an absolute <div>element with absolute position and 100% height:
这也应该有效。首先创建一个<div>具有绝对位置和 100% 高度的绝对元素：
<div id="h" style="position:absolute;top:0;bottom:0;"></div>
Then, get the window height from that element via offsetHeight
然后，通过该元素获取窗口高度 offsetHeight
var winHeight = document.getElementById('h').offsetHeight;
Update:
更新：
function getBrowserSize() {
var div = document.createElement('div');
div.style.position = 'absolute';
div.style.top = 0;
div.style.left = 0;
div.style.width = '100%';
div.style.height = '100%';
document.documentElement.appendChild(div);
var results = {
width: div.offsetWidth,
height: div.offsetHeight
};
div.parentNode.removeChild(div); // remove the `div`
return results;
}
console.log(getBrowserSize());
回答by Tanny O'Haley
There's a simpler way than a whole bunch of if statements. Use the or (||) operator.
有一种比一大堆 if 语句更简单的方法。使用或 (||) 运算符。
function getBrowserDimensions() {
return {
width: (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth),
height: (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)
};
}
var browser_dims = getBrowserDimensions();
alert("Width = " + browser_dims.width + "\nHeight = " + browser_dims.height);
回答by FrEaKi
var winWidth = window.screen.width;
var winHeight = window.screen.height;
document.write(winWidth, winHeight);
回答by josh.thomson
I prefer the way I just figured out... No JS... 100% HTML & CSS:
我更喜欢我刚刚想出来的方式……没有 JS……100% HTML & CSS：
(Will center it perfectly in the middle, regardless of the content size.
（无论内容大小如何，都将其完美地居中。
HTML FILE
HTML文件
<html><head>
<link href="jane.css" rel="stylesheet" />
</head>
<body>
<table id="container">
<tr>
<td id="centerpiece">
123
</td></tr></table>
</body></html>
CSS FILE
CSS文件
#container{
border:0;
width:100%;
height:100%;
}
#centerpiece{
vertical-align:middle;
text-align:center;
}
for centering images / div's held within the td, you may wish to try margin:auto; and specify a div dimension instead. -Though, saying that... the 'text-align' property will align much more than just a simple text element.
对于在 td 中保存的居中图像/div，您可能希望尝试 margin:auto; 并指定一个 div 维度。-虽然，说... 'text-align' 属性将不仅仅是一个简单的文本元素对齐。
回答by Alexander C.
JavaScript version in case if jQuery is not an option.
JavaScript 版本，以防 jQuery 不是一个选项。
window.screen.availHeight
window.screen.availHeight
回答by Mahib
With JQuery you can try this $(window).innerHeight()(Works for me on Chrome, FF and IE). With bootstrap modal I used something like the following;
使用 JQuery，你可以试试这个$(window).innerHeight()（适用于 Chrome、FF 和 IE）。使用引导模式，我使用了如下所示的内容；
$('#YourModal').on('show.bs.modal', function () {
$('.modal-body').css('height', $(window).innerHeight() * 0.7);
});
