调整浏览器窗口大小时自动更改框的宽度？

Question

我有2个盒子。调整窗口大小时，＃content-left和＃content-right会自动调整高度。我想要的是自动调整＃内容的大小 - 正确的宽度也填补了这两个框之间的差距。

到目前为止我写的代码仅适用于首页加载或刷新。当窗口被调整大小时它不起作用。我究竟做错了什么？

Live version.

的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; 
} 

Answer 1

这是因为您将宽度设置为常量值，因此即使调整窗口大小也不会改变宽度。将高度和宽度更改为百分比值，例如60％或70％，并且它们将扩大或缩小窗口。请注意，如果元素收缩，其内容可能会以丑陋的方式溢出。