0

私のテンプレートでは、ラッパー div は別の 2 つのコンテナーを保持します。1 つは固定位置の左 div で、もう 1 つは絶対位置の右 div です。右側の div には、幅 100% の別の子 div が含まれています。

HTML:

<div id ="wrapper">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS :

     #wrapper {position:absolute; width:100%; height:100%;background:red;}
 .left {float:left; position:fixed; width:150px; height:100%;background:green;}
.right {position:absolute; width:350px; height:100%; margin-left:150px;background:blue;}

ここでの私のターゲットはrightコンテナです。ウィンドウのサイズ変更時にこれの幅を調整したいright divので、その幅はそのままです（ビューポートの幅 - 左のdiv幅）。

jqueryで試してみました：

var right_width_prcnt = (($(window).width()- 150)/($(window).width()/100) )

function right_width_adjust() {
         $('.right').stop(false,true).animate({'width':right_width_prcnt + '%'});
};

var resizeTimer = null;
$(window).bind('resize', function() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(right_width_adjust, 100);
});

参照用の Jsfiddle : http://jsfiddle.net/RWDQ2/2/

ウィンドウのサイズを変更するたびに、常に右divの幅を調整するcssメソッド（jqueryなし）=（ウィンドウ幅-左div幅）はありますか

4

2 に答える 2

1

私はこれがあなたが必要とするものだと思います

$(document).ready(function() {
    $(window).bind('resize', function() {
        var right_width_prcnt = (($(window).width()-150)/($(window).width()/100) );
        $('.right').stop(false,true).animate({'width':right_width_prcnt+ '%'});
    });
});

注：あなたのコードでは、

var right_width_prcnt = (($(window).width()-150)/($(window).width()/100) );

domready ですでに宣言されています。つまり、ウィンドウのサイズを変更しても値は変わりません。ウィンドウのサイズ変更時に再計算する必要があります。

また、おそらく、このようにパーセンテージを計算してみてください。

var right_width_prcnt = (($(window).width()-150)/$(window).width())*100;

これが役立つことを願っています...

于 2013-04-09T11:42:19.003 に答える