javascript - 填充 div 之后的所有空间

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