$(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> </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();
精彩评论