0

2箱あります。#content-left と #content-right は、ウィンドウのサイズが変更されると、高さが自動的に変更されます。私がしようとしているのは、#content-right の幅も自動的にサイズ変更して、これら 2 つのボックスの間のギャップを埋めることです。

これまでに書いたコードは、最初のページの読み込み時または更新時にのみ機能します。ウィンドウのサイズが変更されると機能しません。私は何を間違っていますか？

ライブバージョン。

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

1 に答える 1

0

これは、幅を定数値に設定しているため、ウィンドウのサイズを変更しても変更されないためです。高さと幅を 60% や 70% などのパーセンテージ値に変更すると、ウィンドウに合わせて拡大または縮小します。要素が収縮すると、その内容が醜い方法でこぼれる可能性があることに注意してください。

于 2012-07-22T04:52:02.570 に答える