$ (window) .height () проблемы в IE и FF
Я написал скрипт, чтобы сделать динамический размерdiv
(#table) на моей странице. У меня также есть меню (#menu) сnav
внутри это устанавливает минимальную высоту. В Chrome и Safari все работает нормально, но в IE / FF не так много. В обоих случаях у меня одна и та же проблема: если я загружаю страницу в полноэкранном режиме, а затем минимизирую ее с помощью кнопки минимизации, происходит неправильно$(window).height()
, Если я перезагружу его свернутым, он будет работать нормально, я даже могу изменить его размер, чтобы div корректировался. Я поместил некоторые изображения, чтобы прояснить, о чем я говорю.
С FF у меня другая проблема. У него всегда есть пробел в нижней части div, когда размер окна больше, чем у меню. Это как значение, которое я применяю в других браузерах, не подходит для Firefox. Эта проблема только с высотой. Динамическая ширина работает нормально.
versions of my browsers являются следующие: я думаю, что они самые последние.
Chrome 21.0.1180.89 m Safari 5.1.7 Internet Explorer 9 Firefox 14.0.1Here is my javascript/jQuery code:
<!-- 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>
Часть страницыstyle:
/* 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;}
А такжеhere are the images: