$ (window) .height () problems in IE and FF

Question

I wrote a script to make the dynamic dimension div (#table) inside my page. I also have a menu (#menu) with nav inside, which sets the minimum height. Everything works fine in Chrome and Safari, but not so much in IE / FF. In both cases, I have the same problem: if I load the full screen of the page and then minimize it using the minimize button, it accepts the wrong $(window).height() . If I reload it with a minimum value, it works fine, I can even resize it so that the div adjusts normally. I set some images to be clear about what I'm talking about.

I have another problem with FF. It always takes place at the bottom of the div when the window size is larger than the menu. Its value, which I use in other browsers, is not suitable for Firefox. This problem is only with height. Dynamic width is working fine.

versions of my browsers : I think they are the latest.

• Chrome 21.0.1180.89 m
• Safari 5.1.7
• Internet Explorer 9
• Firefox 14.0.1

Here is my javascript / jQuery code:

 <!-- Menu resize --> <script type='text/javascript'> $(function(){ $('#menu').css({'height':(($(window).height())-350)+'px'}); $('#table').css({'height':(($(window).height())-225)+'px'}); $('#table').css({'min-height':(($('nav').height())-15)+'px'}); $('#table').css({'width':(($(window).width())-135)+'px'}); $(window).resize(function(){ $('#menu').css({'height':(($(window).height())-350)+'px'}); $('#table').css({'height':(($(window).height())-225)+'px'}); $('#table').css({'width':(($(window).width())-151)+'px'}); }); }); </script> 

Part of the page style :

 /* NAV */ #line{ width:1px; position:absolute; left:147px; top:123px; bottom:0px; background-color:#b3b3b3; } nav{ width:147px; min-height: 100%; float:left; } nav ul{ list-style:none; padding:0px; margin:0px; } nav li{ display:block; width:147px; height:24px; line-height:24px; border-bottom: 1px solid #b3b3b3; text-indent:30px; -moz-box-shadow: inset 1px 1px 1px #ffffff; -webkit-box-shadow: inset 1px 1px 1px #ffffff; box-shadow: inset 1px 1px 1px #ffffff; } nav li a{ color:#808080; font-size:14px; text-decoration:none; display:block; } nav li:hover{ background-color:#cccccc; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } nav li .active{ background-color:#fdad06; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } nav li a.active{ color:#7e5303; } nav li:first-child{ border-top: 1px solid #b3b3b3; } nav #group{ width:148px; height:49px; font-size:14px; font-weight:bold; line-height:49px; text-indent:22px; } /* SECTION */ #menu_and_content{ width:auto; display:block; background-image:url(images/background.jpg); box-shadow:inset 0 5px 5px rgba(0,0,0,.2) } #menu_and_content #menu{ width:148px; vertical-align:top; border-right-style:solid; border-right-width:1px; border-right-color:#b3b3b3; padding: 0px 0px 20px 0px; } #menu_and_content #content{ width:100%; vertical-align:top; } #table{ overflow-x:scroll; overflow-y:scroll; width:500px; } #table table{ width:100%; font-size:11px; padding:25px 25px 25px 25px; text-align:left; } #table table thead th{ font-size:12px; font-weight:bold; color:#969696; cursor:pointer; } #content table td, th{ border-bottom:solid; border-bottom-color:#afafaf; border-bottom-width:1px; white-space: nowrap; padding:0px 5px 0px 10px; line-height:24px; } #content table td:first-of-type, th:first-of-type { padding-left:4px; } #content table tr:hover:not(#captions){ background-color:rgba(255,255,255,0.4); color:#3e3a34; cursor:pointer; } #content table input[type='checkbox']{ margin-top:2px; border-color:#949494; } #login_container{display:block; height:260px;} 

And here are the images:

Answer 1

I had the same issue with Firefox and I decided to add it to all my HTML files. The solution was indicated in this question:

Why Firefox returns 0 as the value of $ (window) .height ()

In jQuery 1.8.1 release notes

Do not use Quirks mode! jQuery has never supported Quirks mode, and we do not test in Quirks. This may affect values ​​such as $ ("window"). height (), and the results of Quikks jQuery 1.8 mode are designed to support some modern browser features. We saw most of the problem cases from developers who wanted to be in the Standard, but had an invalid type of doctrine or extraneous markup in front of their tag. If in doubt, use simple and short.

Answer 2

Try innerHeight() or outerHeight() instead of height()

Indents / borders / margins may not be included

Answer 3

Please see this blog. He did a very detailed study of the screens in the browser.

http://tripleodeon.com/2011/12/first-understand-your-screen/