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容器。我想在窗口重新调整大小时调整此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/

每当我们重新调整窗口大小时，是否有任何css方法（没有jquery）来调整右div =（窗口宽度-left 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;

我希望这会有所帮助......

Answer 2

你可以在这里尝试一些操作。

如果您的左侧div宽度以像素为单位固定，则将width:100%赋予右侧div并为右侧div创建内部div并将左边距（值应等于左侧div宽度）赋予内部div格。

<强> HTML

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

<强> CSS

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*/
}

<强> DEMO

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

2 个答案: