Question

如何设置右边div的宽度百分比，以便填充左边div后的所有空格？

<div id='wrap'>
    <div id='left'></div>
    <div id='right'></div>
</div>

#wrap {
    border: 5px solid green;
    float: left;
    width: 100%;
    height: 100px;
}
#left {
    background: black;
    position: relative;
    top:0;
    left: 0;
    width: 90px;
    height: 100px;
    float:left;
}
#right {
    background: grey;
    position: relative;
    top:0;
    right: 0;
    height: 100px;
    float:right;
}

尝试过：

$(document).ready(function () {
    var x = $('#left').width();
    $('#right').width((100 - x) + '%');
});

fiddle

Answer 1

在css3中使用calc()属性：

#right{
 width: calc(100% - 100px); /*<---do it here*/
 background: grey;
 position: relative;
 top:0;
 right: 0;
 height: 100px;
}

不确定，但您也可以使用display table, table-row, table-cell属性执行此操作：

#wrap {
   border: 5px solid green;
   float: left;
   width: 100%;
   height: 100px;
   display:table; /*<----here*/
}
#left {
   background: black;
   position: relative;
   top:0;
   left: 0;
   width: 90px;
   height: 100px;
   display:table-cell;  /*<----here*/
}
#right {
   background: grey;
   position: relative;
   top:0;
   right: 0;
   height: 100px;
   display:table-cell;  /*<----here*/
}

Answer 2

您可以将包装div的背景颜色设置为灰色，然后使用左侧div覆盖左侧部分。这样你就不需要任何JS计算了。

检查更新后的小提琴：http://jsfiddle.net/5cuH2/6/

<强> CSS

#wrap{
  border: 5px solid green;
  width: 100%;
  height: 100px;
  background: grey;
}
#left{
  background: black;
  position: relative;
  top:0;
  left: 0;
  width: 90px;
  height: 100px; 
  float:left;
}
#right{
  position: relative;
  top:0;
  right: 0;
  height: 100px;
  float:right;
}

.clear {
    clear: both;
}

Answer 3

试试这个http://jsfiddle.net/5cuH2/15/

$(document).ready(function () {
    var wrap = $('#wrap').width();
    var left = $('#left').width();
    $('#right').width((wrap-left) + 'px');
});

Answer 4

试试这个

 $(document).ready(function () {
    var x = $('#left').width();

    var total = $('#wrap').width();

    $('#right').css({
        width: total - x + "px"
    });
});

或

var x = $('#left').width(); var total = $('#wrap').width(); var leftPer = x * 100 / total; $('#right').css({ width: 100 - leftPer + "%" });

DEMO

Answer 5

试试这个

var x = ($('#left').width()/$('#wrap').width())*100;
 $('#right').width((100 - x) + '%');

Answer 6

var dx = $('#wrap').width();
var x = $('#left').width();
$('#right').width((dx - x) + 'px');

Answer 7

使用display:flex。根据浏览器的实现，您必须使用'webkit，moz ..作为前缀。' Flex tutorial

Flex Browser Support

工作样本：JSFIDDLE

在div之后填补所有空间

7 个答案: