調整瀏覽器窗口大小時是否自動更改框的寬度？

Question

我有兩個盒子。 調整窗口大小時，＃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;
}

Answer 1

那是因為您將寬度設置為恆定值，因此即使您調整窗口的大小，寬度也不會改變。 將高度和寬度更改為百分比值，例如60％或70％，它們將隨窗口擴展或收縮。 請注意，如果元素收縮，其內容可能會以丑陋的方式溢出。