我正在寻找一个代码 sn-p 来获取浏览器窗口中可视区域的高度。
我有这个代码，但是它有点错误，好像主体没有超过窗口的高度然后它又变短了。
document.body.clientHeight;
我尝试了其他一些方法，但它们要么返回 NaN，要么返回与上述相同的高度。
有人知道如何获取浏览窗口的实际高度吗？
【问题讨论】：
标签： javascript window height
你会想要这样的东西，取自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 );
}
因此，innerHeight 用于现代浏览器，documentElement.clientHeight 用于 IE，body.clientHeight 用于已弃用/怪癖。
【讨论】：
尝试使用 jquery：
window_size = $(window).height();
【讨论】：
您可以使用window.innerHeight
【讨论】：
我喜欢这样做的方式是使用三元赋值。
var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
我可能会指出，如果您在全局上下文中运行它，那么从那时起您可以使用 window.height 和 window.width。
据我所知可在 IE 和其他浏览器上运行（我只在 IE11 上测试过）。
超级干净，如果我没记错的话，效率很高。
【讨论】：
var width = window.innerWidth || window.clientWidth; 模式是否有技术原因。
有一种比一大堆 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);
【讨论】：
这也应该有效。首先创建一个绝对位置和 100% 高度的绝对 <div> 元素：
<div id="h" style="position:absolute;top:0;bottom:0;"></div>
然后，通过offsetHeight获取该元素的窗口高度
var winHeight = document.getElementById('h').offsetHeight;
更新：
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());
【讨论】：
var winWidth = window.screen.width;
var winHeight = window.screen.height;
document.write(winWidth, winHeight);
【讨论】：
使用 JQuery 你可以试试这个$(window).innerHeight()（适用于我在 Chrome、FF 和 IE 上）。使用引导模式，我使用了类似以下的内容；
$('#YourModal').on('show.bs.modal', function () {
$('.modal-body').css('height', $(window).innerHeight() * 0.7);
});
【讨论】：
我更喜欢我刚刚发现的方式...没有 JS...100% HTML 和 CSS：
（无论内容大小如何，都会将其完美居中。
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 文件
#container{
border:0;
width:100%;
height:100%;
}
#centerpiece{
vertical-align:middle;
text-align:center;
}
对于在 td 中居中的图像 / div，你不妨试试 margin:auto;并指定一个 div 维度。 - 不过，话说……'text-align' 属性将不仅仅对齐一个简单的文本元素。
【讨论】：
如果 jQuery 不是一个选项，JavaScript 版本。
window.screen.availHeight
【讨论】：