$(window).height() 在 IE9 上失败

Question

抱歉，我不确定在这里问这个问题是否合适。但是这个问题困扰了我很长时间。 我尝试使用 $(window).height() 来获取整个页面的可见区域高度。我在几乎所有浏览器上都工作正常。但在 IE9 及其兼容模式下表现很奇怪。当我拖动浏览器窗口的边框并尝试调整其大小时，$(window).height() 的值 变得越来越大，即使我试图让窗口变小。

我尝试了其他一些方法，例如 document.documentElement.scrollHeight，但它仍然没有达到我的预期。

接下来我能做什么？

更新

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>

Answer 1

始终使用：

$(window).innerHeight();

IE 不支持 height() 函数。但 innerHeight() 是跨浏览器兼容的。

也可用于宽度：

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