我有2个盒子。当窗口调整大小时，#content-left 和 #content-right 会自动调整高度。我想要做的是自动调整#content-right 的宽度以填补这两个框之间的空白。
到目前为止，我编写的代码仅适用于第一页加载或刷新。调整窗口大小时它不起作用。我究竟做错了什么？
jQuery：
$(document).ready(function(){
$(window).load(function() {
scrollPaneLoad();
});
function scrollPaneLoad() {
if ($(window).height() > $(document).height()) {
main_height = $(document).height();
} else {
main_height = $(window).height();
}
div_height = main_height - $('#header-outer').height() - $('#footer').height();
if (div_height < 400) div_height = 400;
$('#content-right, #content-left').css({height: div_height + 'px'});
img_width = $('img.content-left-img').width();
content_right_width = 945 - img_width;
$('#content-left').css({width: img_width + 'px'});
$('#content-right').css({width: content_right_width + 'px'});
$('#content-right').jScrollPane(
{
showArrows: true,
horizontalGutter: 10
}
);
}
$(window).resize(function() {
scrollPaneLoad();
});
});
HTML：
...
<div id="content">
<div id="content-left">
<img src="img/home.jpg" class="content-left-img" />
</div><!--eof #content-left-->
<div id="content-right">
<div class="inner">
<!--content goes here-->
</div><!--eof .inner-->
</div><!--eof #content-right-->
<div class="float-fix"></div>
</div>
...
CSS：
#content {
width:950px;
text-align:left;
margin:0 auto;
}
#content-left {
float:left;
position:relative;
width:565px;
min-height:400px;
height:100%;
overflow:hidden;
background-color: transparent;
background-position: left top;
background-repeat: no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
-khtml-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#content-left img.content-left-img {
position: absolute;
top: 0;
left: 0;
z-index: 0;
height: 100%;
min-height: 400px;
margin: 0;
border: 0;
}
#content-right {
float:right;
width:380px;
}
#content-right .inner {
padding:15px;
}