如何填充100％的剩余宽度

Question

是否有任何工作可以像预期的那样做这样的工作？ 我希望有类似width:remainder;或width:100% - 32px;的内容。

width: auto;不起作用。

我认为唯一可行的方法是使用填充/边距，负值或浮点数，或者某些html标签黑客攻击。我试过也显示：block;。

我希望得到与此相同的结果，而不使用表http://jsfiddle.net/LJGWY/

<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
    <div style="display:inline; width: (100%-100px); border: 3 solid green;">Fill</div>
    <div style="display:inline; width: 100px; border: 3 solid blue;">Fixed</div>
</div>

Answer 1

阻止级别元素，例如＆lt; div＆gt;将自动填充100％的可用宽度。如果将其中一个向右浮动，另一个将填充剩余空间。

<div style="height: 100px; border: 3px solid red;" id="container">
  <div style="float: right; width: 100px; border: 3px solid blue;">Fixed</div>
  <div style="border: 3px solid green;">Fill</div>
</div>

http://jsfiddle.net/5AtsF/

Answer 2

对于任何看过这个的人来说，这是一个名为calc的新的css属性方法，它可以以更加灵活的方式执行此操作。

<div class="container">
    <div class="fixedWidth"></div>
    <div class="variableWidth"></div>
</div>

.fixedWidth{
width:200px;
}
.variableWidth{
width:calc(100%-200px);
}

作为一个警告，这不是非常便携，并且在移动设备上支持很少。 IOS 6+和andriod 4.4我相信。对于台式机，支持明显更好，IE 9.0 +。

http://caniuse.com/calc

我过去曾使用JS hack来实现这种技术，如果有人被卡住了，不同的布局更可取，尽管调整速度较慢。

window.addEventListener('resize', function resize(){
    var parent = document.getElementById('parent');
    var child = document.getElementById('child');
    child.style.width = parseInt(parent.offsetWidth - 200) + "px"; //200 being the size of the fixed size element
}, false);

Answer 3

这应该适合你：

<div style="position: absolute; width: 100%; height: 100px; border: 3px solid red;" id="container">
    <div style="float: right; width: 100px; border: 3px solid blue;">Fixed</div>
    <div style="display: block; margin-right: 100px; border: 3px solid green;">Fill</div>
</div>

See the jsFiddle

这假设你要从最终结果中删除3px边框（它们在示例中重叠，因为边框宽度不包括在宽度中）。

Answer 4

您可以在不使用display:table属性更改标记的情况下实现此目的：

.parent{
    position: absolute;
    left:0;
    right:0;
    height: 100px;
    border: 3px solid red;
    display:table;
}
.fill{
    margin-right: 100px;
    border: 3px solid green;
    display:table-cell;
    width:100%;
}
.fixed{
    width: 100px;
    border: 3px solid blue;
    display:table-cell;
}

选中没有horizontal scrollbar

的实时示例

http://jsfiddle.net/WVDNe/5/

另一个例子，但更好地检查一下：

http://jsfiddle.net/WVDNe/6/

注意：它在IE7＆amp;以下

同时检查

http://jsfiddle.net/LJGWY/4/

它可以在所有浏览器中使用。

Answer 5

如果您不知道固定部分的大小，可以使用flex 9999 hack。

<div class="container">
  <div class="fixedWidth"></div>
  <div class="variableWidth"></div>
</div>

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.fixedWidth {
    flex: 1;
}

.variableWidth {
    flex: 9999;
}

Answer 6

尝试设置如下位置：

<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
    <div style="position:absolute; left: 0; top: 0; right: 100px; border: 3 solid green;">Fill</div>
    <div style="position:absolute; top: 0; right: 0; width: 100px; border: 3 solid blue;">Fixed</div>
</div>

Answer 7

您可以将fixed div放在fill div。

中

<div id="container">
    <div>Fill
        <div>Fixed</div>
    </div>
</div>

<强> CSS

#container{
    position:absolute;
    width:90%;
    height:100px;
    border:3px solid red;
}

#container div{
    height:95%;
    border:3px solid green;
    width:100%;
}

#container div div{
    height:95%; 
    width:100px;
    border:3px solid blue;
    float:right;
}

示例： http://jsfiddle.net/EM8gj/3/

Answer 8

你可以使用表格样式。 使用表格样式创建div，子项目是表格单元格样式

    标签文本

Answer 9

如果使用CSS，一种简单的解决方案可能是在div内部使用以下代码：

div{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}