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

Question

我有 2 个盒子。 #content-left 和#content-right 在窗口调整大小时自动调整高度。我正在尝试的是自动调整#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%，它们将随窗口扩展或收缩。请注意，如果元素收缩，其内容可能会以难看的方式溢出。