4
我寫了一個腳本，在我的頁面中創建一個動態大小的div（#table）。我也有一個菜單（#menu），裏面有一個nav，它建立了最小高度。在Chrome和Safari中一切正常，但在IE/FF中並沒有那麼多。在兩個我都有同樣的問題：如果我加載頁面全屏，然後我最小化它與最小化按鈕，它會採取錯誤$(window).height()。如果我重新加載它最小化，它工作正常，我甚至可以調整大小，使div調整好。我把一些圖片清楚地說明了我在說什麼。
使用FF我有另一個問題。當窗口大小大於菜單時，它總是在div底部有一個空格。它就像我在其他瀏覽器中應用的價值不適合Firefox。 這個問題只與高度有關。動態寬度工作正常。
我的瀏覽器的版本如下：我認爲它們是最新的。
- 的Chrome 21.0.1180.89米
- 的Safari 5.1.7
- 的Internet Explorer 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>
pa的一部分GE 風格：
/* 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;}
而且這裏是圖像：
內作出有關屏幕尺寸非常詳細的研究，你可以張貼的CSS爲#menu，#table和導航元素？ – Nicodemeus
發表，抱歉，我忘了！ –