Jquery 窗口调整时自动调整右容器的宽度

在我的模板中，wrapper div包含另外两个容器。一个是固定位置左div，另一个是绝对位置右div。右div包含另一个宽度为100%的子div

Html:

我的目标是

右侧的
容器。我想在重新调整窗口大小时调整此
右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);
});

JSFIDLE供参考：

当我们调整窗口大小时，是否有任何css方法（没有jquery）可以随时调整右div=（窗口宽度-左div宽度）的宽度？我想这就是您需要的

$(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;

我希望这有帮助…
您可以在这里尝试一些操作

如果左div宽度以像素为单位固定，则为右div指定
width:100%
，为右div创建一个内部div，并为内部div指定左边距（值应等于左div宽度）

HTML

<div class="wrapper">
      <div class="left">zc</div>
      <div class="right">
          <div class="right_inner">xvnxmvn </div>
    </div>
</div>

这需要用更好的措辞，很难理解你的意思wantThanks@Christian ! 是的，我认为我的百分比宽度值始终保持不变，它需要是动态的，用你的方式尝试。这个调整正确容器的宽度，以及它的子元素的宽度=100%，但这里的问题是，一旦我为较小的窗口重新调整大小，然后使用“最大化浏览器”按钮最大化窗口，子元素的宽度保持在较小窗口的最后一个位置。您的代码工作正常，动态调整右容器及其子元素的宽度。但一旦我点击浏览器最大化按钮，右边的容器div就变成了初始宽度。但此右div内的内部元素的宽度保持不变。在“窗口大小调整为更小”时=>右div的宽度及其子元素的大小调整为更小，但在使用Browser max button=>maximized的浏览器上，右div的宽度会相应地调整大小，但其子元素和子元素的大小不变。Thnx@Sowmya--->这真的很好，也很简单，但我的基本风格是，左侧始终处于固定位置，右侧处于绝对位置。实际上，左侧用于固定垂直导航，右侧用于内容框。@Galaxy left仅在此处固定。再次谢谢你，sowmya！但主要的问题是，在移除左侧的绿色背景后，您可以看到右侧（背景：蓝色）捕获整个屏幕。这就是我不想要的。@Galaxy这就是我所谓的操纵。无论如何，您的div将具有默认颜色，因此它有助于隐藏正确的div颜色。
var right_width_prcnt = (($(window).width()-150)/$(window).width())*100;

<div class="wrapper">
      <div class="left">zc</div>
      <div class="right">
          <div class="right_inner">xvnxmvn </div>
    </div>
</div>

html, body{
    height:100%;
    margin:0
}
.wrapper { 
    width:100%; 
    height:100%;
    background:red; 
    float:left
}
 .left {
     width:150px; 
    height:100%;
    background:green; 
    position:fixed
}
.right { 
    width:100%; 
    height:100%;  
    background:blue;     
    color:white;
}
.right_inner { 
    margin-left:150px; 
    padding:10px /*Only if you need*/
}