JavaScript – 获取浏览器高度
我正在寻找一个代码片段来获取浏览器窗口内的可视区域的高度。
我有这个代码，但是它有一些bug，就好像身体没有超过窗口的高度，然后又回来了。
document.body.clientHeight; 我已经尝试过其他一些东西，但是要么返回NaN，要么与上面的高度相同。
有谁知道如何获得浏览窗口的真正高度？
你会想要这样的，从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 ，IE的documentElement.clientHeight ，不赞成使用/ quirks的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上testing过）。
超级干净，如果我没有错，高效。
有一个简单的方法比一大堆if语句。 使用or（||）运算符。
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);
这也应该起作用。 首先创build绝对位置和100％高度的绝对div元素：
<div id="h" style="position:absolute;top:0;bottom:0;"></div>
然后，通过offsetHeight从该元素获取窗口高度
var winHeight = document.getElementById('h').offsetHeight;
我更喜欢我刚想出来的方式…没有JS … 100％的HTML和CSS：
（无论内容大小如何，它都会在中间完美alignment。
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尺寸。 – 尽pipe如此，说'文本alignment'属性将不仅仅是一个简单的文本元素。
JavaScript版本的情况下，如果jQuery不是一个选项。
window.screen.availHeight
var winWidth = window.screen.width; var winHeight = window.screen.height; document.write(winWidth, winHeight);
有了JQuery，你可以试试$(window).innerHeight() （适用于Chrome，FF和IE）。 使用bootstrap模式，我使用了类似下面的内容;
$('#YourModal').on('show.bs.modal', function () { $('.modal-body').css('height', $(window).innerHeight() * 0.7); });
