$（Window）.height（）在浏览器中不一致 [英] $(Window).height() inconsistent across browsers

问题描述

我正在开发一个网站这里 [< a href =https://wiki.nsgame.cftarget =_ blanktitle =New Window> ^ ]。我已禁用正文滚动并启用#page滚动，这意味着我需要手动指定高度。我通过将#page的高度设置为$（窗口）.height（）减去页面的顶部和底部16px边距，以及标题的顶部和底部16px边距和48px高度，每隔500ms执行此操作。这在Chrome和Opera上看起来很好，但在Firefox和IE上，高度设置得太高，这会削弱底部的一小块区域。



对于调试，每次完成时文档标题设置为$（window）.height（）。



为什么会这样，并且有什么方法可以一直处理它而不是必须检测浏览器并改变每个浏览器的计算？



我尝试过：



------------------------------------- ------------------------------

解决方案

（窗口） .height（）减去页面的顶部和底部16px边距，标题的顶部和底部16px边距和48px高度。这在Chrome和Opera上看起来很好，但在Firefox和IE上，高度设置得太高，这会削弱底部的一小块区域。



对于调试，文档标题设置为

（窗口）.height（）每次完成。



为什么可能是这样，并且有没有办法一直处理它而不是必须检测浏览器并改变每个浏览器的计算？



我是什么尝试过：



--------------------------- ----------------------------------------

在Chrome，Firefox 61，Edge和IE11中，我的网站看起来一样。



如果你可以放弃对旧版IE的支持，你可能会做得更好使用网格布局 - 无需Javascript：演示 [ ^ ]



我可以使用...... CSS网格布局 [ ^ ]

网格完整指南| CSS-Tricks [ ^ ]

Grid by Example [ ^ ]

Hi,

I'm developing a site here[^]. I've disabled body scrolling and enabled scrolling on #page, which means I need to assign a height manually. I do this every 500ms by setting the height of #page to $(window).height() minus the page's top and bottom 16px margins, and the header's top and bottom 16px margins and 48px height. This looks fine on Chrome and Opera, but on Firefox and IE, the height is set to a value too high, which cuts off a small area at the bottom.

For debugging, the document title is set to $(window).height() every time this is done.

Why could this be, and is there any way to deal with it consistently rather than having to detect the browser and altering the calculation for each one?

What I have tried:

-------------------------------------------------------------------

解决方案

(window).height() minus the page's top and bottom 16px margins, and the header's top and bottom 16px margins and 48px height. This looks fine on Chrome and Opera, but on Firefox and IE, the height is set to a value too high, which cuts off a small area at the bottom.

For debugging, the document title is set to

(window).height() every time this is done.

Why could this be, and is there any way to deal with it consistently rather than having to detect the browser and altering the calculation for each one?

What I have tried:

-------------------------------------------------------------------

The site looks the same for me in Chrome, Firefox 61, Edge, and IE11.

If you can drop support for old versions of IE, you might do better with Grid layout - no Javascript required: Demo[^]

Can I use... CSS Grid Layout[^]
A Complete Guide to Grid | CSS-Tricks[^]
Grid by Example[^]

这篇关于$（Window）.height（）在浏览器中不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！