当容器的大小固定时，如何使并排的块填充容器的其余部分

Question

我有两个并排的块。一个大小是固定的，90px，另一个不是，我希望另一个扩展到容器的其余部分，因为容器大小将不断变化。

以下是对展示问题的赞扬：http://jsfiddle.net/L6CSG/

HTML

<div class="container">
    <span class="left"></span>
    <span class="right"></span>
</div>

CSS

.left, .right {
    height: 30px;
    display: inline-block;
    margin: 0px;
    float: left;
}
.left {
    background: green;
    width: 90px;
}
.right {
    background: blue;
    width: 100%; // How can I make it fit the rest of the container?
}
.container {
    width: 400px; // This value is NOT STATIC
}

Answer 1

您可以通过纯CSS来实现，这里是jsFiddle 的工作示例

1. 确保填充element是DOM树中的最后一个
2. 确保其余元素已指定position: relative，宽度+高度

这是我学到的好技巧：

HTML：

<div id="container">
    <div class="left"></div>
    <div class="rest"></div>
</div>

CSS：

#container {
    width:50%;
    height: 50px;
    background-color: red;
    min-width: auto;
}
.left {
    position: relative;
    float: left;
    width: 90px;
    height: 100%;
    background: blue;
}
.rest {
    display: block;
    height: 100%;
    overflow: hidden;
    background: yellow;
}

Answer 2

解决方案1:

使.right width: calc(100% - 90px);的宽度

解决方案2:

http://jsfiddle.net/L6CSG/4/在这种解决方案的情况下，您可能应该使用div而不是span，因为我将您的span更改为块元素。

Answer 3

您必须仅为左侧一个设置float: left

查看结果：http://jsfiddle.net/L6CSG/2/

您还需要display: block和width: auto用于正确的

Answer 4

以下是解决方案：

HTML:

<div class="container">
<span class="left"></span>
<span class="right"></span>
</div>

CSS：

.left, .right {
    height: 30px;
    margin: 0px;
    display: block;
}
.left {
    background: green;
    width: 90px;
    float: left
}
.right {
    background: blue;
    width: auto;
}
.container {
    width: 400px; 
}

Answer 5

需要JavaScript来计算可以填充的额外空间，因为容器不是固定宽度的。

var con = document.querySelector(".container");
var left = document.querySelector(".left");
var right = document.querySelector(".right");
window.addEventListener('resize', function() {
   calcSize(); 
});
function calcSize() {
    var diff = con.offsetWidth - left.offsetWidth;
    right.style.width = diff + "px";
}
calcSize();

http://jsfiddle.net/L6CSG/7/