divページ内に動的サイズ (#table)を作成するスクリプトを作成しました。navまた、最小高さを確立する内部のメニュー (#menu) もあります。Chrome と Safari ではすべて問題なく動作しますが、IE/FF ではあまり機能しません。両方で同じ問題があります。ページをフルスクリーンでロードしてから最小化ボタンで最小化すると、間違った $(window).height(). 最小化してリロードすると、正常に動作し、div が正常に調整されるようにサイズを変更することもできます。私が話していることを明確にするために、いくつかの画像を入れました。
FFには別の問題があります。ウィンドウのサイズがメニューよりも大きい場合、常に div の下部にスペースがあります。私が他のブラウザーに適用する値は、Firefox には適合しません。この問題は高さだけです。動的幅は正常に機能します。
私のブラウザのバージョンは次のとおりです。最新のものだと思います。
- クロム 21.0.1180.89 m
- サファリ5.1.7
- Internet Explorer9
- Firefox 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;}
そして、ここに画像があります：
