我编写了一个脚本来div在我的页面中创建一个动态大小的（#table）。我还有一个菜单（#menu），nav里面有一个确定最小高度的菜单。在 Chrome 和 Safari 中一切正常，但在 IE/FF 中就没有那么多了。在这两种情况下，我都有同样的问题：如果我全屏加载页面，然后使用最小化按钮将其最小化，则会出现错误的 $(window).height(). 如果我重新加载它最小化，它可以正常工作，我什至可以调整大小以使 div 调整好。我放了一些图片来清楚我在说什么。
对于FF，我还有另一个问题。当窗口大小大于菜单时，它总是在 div 的底部有一个空格。就像我在其他浏览器中应用的值不适合 Firefox。这个问题只是高度。动态宽度工作正常。
我的浏览器版本如下：我认为它们是最新的。
- 铬 21.0.1180.89 m
- Safari 5.1.7
- 互联网浏览器 9
- 火狐 14.0.1
这是我的 javascript/jQuery 代码：
<!-- 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>
部分页面样式：
/* 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;}
以下是图片：
