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

I wrote a script to make a dynamic sized div (#table) inside my page. I also have a menu (#menu) with a nav inside that establishes the min-height. In Chrome and Safari it all works ok, but in IE/FF not so much. In both I have the same problem: If I load the page full screen and then I minimize it with the minimize button, it takes the wrong $(window).height(). If I reload it minimized, it works ok, I can even resize such that the div adjusts ok. I put some images to be clear about what I'm talking about.

With FF I have another problem. It always has a space in the bottom of the div when the window size is bigger than the menu. Its like the value that I apply in the other browsers doesn't fit for Firefox. This problem is only with the height. The dynamic width works ok.

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

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 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:

Miguel Galves

I had the same problem with Firefox, and I solved it adding to all my HTML files. The solution was pointed out in this stack overflow question:

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

The jQuery 1.8.1 release notes say

Don’t use Quirks mode! jQuery has never supported Quirks mode and we do not perform any testing in Quirks. This can affect values like $("window").height(), and the jQuery 1.8 Quirks mode results did change in order to support some modern browser features. The majority of problem cases we’ve seen are from developers that wanted to be in Standards mode but had an invalid doctype or extraneous markup before their tag. When in doubt, use the simple and short .

Majid Laissi

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

The padding / borders / margins may not be included

Please have a look at this blog. He made a very detailed research about screen measurements within the browser

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

来源：https://stackoverflow.com/questions/12325424/window-height-issues-in-ie-and-ff

标签

jquery

cross-browser

height