jquery - 在窗口调整大小时自动调整右侧容器的宽度

Question

在我的模板中，包装器 div 包含另外两个容器。一个是固定位置左边的div，一个是绝对位置右边的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 div 的宽度，因此它的宽度保持不变(视口(viewport)宽度 - 左 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/

每当我们调整窗口大小时，是否有任何 css 方法(没有 jquery)来调整右 div =(窗口宽度 - 左 div 宽度)的宽度

Answer 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;

我希望这有助于...