0

在我的模板中，包装 div 包含另外两个容器。一个是固定位置 left div ，另一个是绝对位置 right 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 =（窗口宽度 - 左 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 回答
1

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

如果您的左 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*/
}

演示

于 2013-04-09T11:49:37.173 回答