JavaScript - 获取浏览器高度
我正在寻找一个代码片段来获取浏览器窗口中可视区域的高度。
我有这段代码,但是它有些问题,好像主体没有超过窗口的高度,然后它会变短。
document.body.clientHeight;
我尝试了其他一些方法,但它们要么返回 NaN,要么返回与上面相同的高度。
有谁知道如何获取浏览窗口的真实高度?
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.
Does anyone know how to get the real height of the browsing window?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(10)
你会想要这样的东西,取自 http://www.howtocreate.co.uk /tutorials/javascript/browserwindow
因此,现代浏览器为
innerHeight
,IE 为documentElement.clientHeight
,已弃用的为body.clientHeight
/怪癖。You'll want something like this, taken from http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
So that's
innerHeight
for modern browsers,documentElement.clientHeight
for IE,body.clientHeight
for deprecated/quirks.尝试使用jquery:
Try using jquery:
您可以使用
window.innerHeight
You can use the
window.innerHeight
我喜欢这样做的方式是这样的三元赋值。
我可能会指出,如果您在全局上下文中运行它,那么从那时起您可以使用 window.height 和 window.width。
据我所知,适用于 IE 和其他浏览器(我只在 IE11 上测试过)。
超级干净,如果我没记错的话,效率很高。
The way that I like to do it is like this with a ternary assignment.
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.
Works on IE and other browsers as far as I know (I have only tested it on IE11).
Super clean and, if I am not mistaken, efficient.
有一种比一大堆 if 语句更简单的方法。使用或 (||) 运算符。
There's a simpler way than a whole bunch of if statements. Use the or (||) operator.
这应该也有效。首先创建一个具有绝对位置和 100% 高度的绝对
元素:
然后,通过
offsetHeight
从该元素获取窗口高度更新:
This should works too. First create an absolute
<div>
element with absolute position and 100% height:Then, get the window height from that element via
offsetHeight
Update:
使用 JQuery,您可以尝试这个
$(window).innerHeight()
(适用于 Chrome、FF 和 IE)。对于引导模式,我使用了类似以下的内容;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;我更喜欢我刚刚想到的方式...没有 JS...100% HTML & 100% HTML CSS:(
无论内容大小如何,都会将其完美居中。
HTML FILE
CSS FILE
用于将 td 内的图像/div 居中,您不妨尝试一下margin:auto; 并指定一个 div 尺寸 - 但是,'text-align' 属性将不仅仅对齐一个简单的文本元素。
I prefer the way I just figured out... No JS... 100% HTML & CSS:
(Will center it perfectly in the middle, regardless of the content size.
HTML FILE
CSS FILE
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.
JavaScript 版本,如果 jQuery 不是一个选项:
JavaScript version in case if jQuery is not an option: