$(window).height() fails on IE9

Sorry,I am not sure it is suitable to ask this ques开发者_StackOverflow社区tion here.But this question has bother me for a long time. I tried to use $(window).height() to get visible area height of whole page. I works fine on almost every browser.But it acts weird under IE9 and it's compatibility mode.When I drag the border of browser window and tried to resize it,the value of $(window).height() become larger and larger,even if I tried to make the window smaller.

I tried some other method like document.documentElement.scrollHeight,but it still didn't act as I expected.

What can I do next?

UPDATE

function ContentAutoFit() {
    var headerh=$(".ui-accordion-header").height();
    var windH=$(window).height();
    if(window.navigator.userAgent.indexOf("MSIE")>0){
        windH=document.clientHeight;
    }
    var nav=$(".ui-tabs-nav").height()+30;
    $("#divPageContent").height(windH - nav);
    $(".ui-tabs-panel").height($("#divPageContent").height() - ($("#tabs ul").height() + 5));
    $("#accordion").height($("#tabs").height()+8);
    $("#accordion").width($("#divPageContent").width()/5);
    $(".ui-accordion-content").height($("#accordion").height()-((headerh+3)*4));
//$( "#accordion" ).accordion();
//$( "#accordion" ).accordion("resize");
}


<div class="StartBar" id="divStBar">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
            <tr>
                <td style="width:25px"><img src="images/slogo2.png" alt="" style="position:relative; top:-2px"></td>
                <td align="right" valign="middle">
                    <div id="divStartMeenu" style=" padding-right: 10px">
                        <ul id="ulStartMenu">

                            <li><a href="javascript:ShowNewThreads()" id="aMsgTip"><span id="divMsgTip"></span></a></li>
                            <li><input name="" onChange="SetStaus()" id="txStaus" type="text" title="What're you doing?"></li>
                            <li><a href="logout">log out</a></li>
                            <li><span id="spUserName" style="color:#212121"></span></li>
                        </ul>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div id="divPageContent" style="width: 100%; ">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style=" vertical-align:top">
            <tr>
                <td style=" vertical-align:top; width: 20%">
                    <div id="accordion" style=" height: 100%; width: 100%; padding-top:10px; padding-left: 10px">
                        <h3><a href="#">topic</a></h3>
                        <div>
                            <ul>
                                <li><a href="javascript:addTab('/child/NewThread.html')">Open new topic</a></li>
                                <li><a href="javascript:addTab('/child/ViewThreadList.html#mine')">My topic</a></li>
                                <li><a href="javascript:addTab('/child/ViewThreadList.html#invited')">Joined topic</a></li>
                                <li><a href="javascript:addTab('/child/ViewThreadList.html#replied')">Referred topic</a></li>
                                <li>&nbsp;</li>
                                <li><a href="javascript:addTab('/child/ViewThreadListByTagSearch.html')">Search By Tag</a></li>
                             </ul>
                        </div>
                        <h3><a href="#">Contacts</a></h3>
                        <div>
                            <ul id="ulContactList">
                                <li>Loading</li>
                            </ul>
                        </div>
                        <h3><a href="#">Status</a></h3>
                        <div>
                            <ul id="ulServiceStaus">
                                <li>Loading</li>
                            </ul>
                        </div>
                        <h3><a href="#">Edit</a></h3>
                        <div>
                            <ul>
                                <li><a href="javascript:LoadServiceTab();">External Service</a></li>
                                <li><a href="javascript:addTab('/child/ManageContacts.html')">Contacts</a></li>
                                <li><a href="javascript:addTab('/child/ManageMyInfo.html')">My profile</a></li>
                            </ul>
                        </div>
                    </div>

                </td>
                <td style=" vertical-align:top">
                    <div id="tabs" style="height: 100%; margin: 10px; margin-bottom: 0px">
                        <ul>

                            <li><a href="#tabs-1">What's new</a></li>
                        </ul>
                        <div id="tabs-1">
                            <iframe marginwidth='0' framespacing='0' marginheight='0' frameborder='0' width='100%' height='100%' src='/child/WhatzNew.html' />"
                        </div>
                    </div>
                </td>
            </tr>

        </table>
    </div>

---

always use:

$(window).innerHeight();

height() function is not supported by IE. But innerHeight() is cross-browser compatible.

Also for widths use:

$('your-selector').innerWidth();