如何填充 100% 的剩余宽度

Question

是否有任何解决方法可以按预期进行此类工作？我希望有类似的东西 width:remainder; 或 width:100% - 32px; 。

width: auto; 不起作用。

我认为唯一可能的方法是解决填充/边距、负值或浮动或一些 html 标签 hack。我也试过显示：块；。

我喜欢得到与此相同的结果，没有表格 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>

原文由 Vitim.us 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新的答案：

这里的答案很旧。今天，这可以通过 flexbox 轻松实现：

 .container {
  border: 4px solid red;
  display: flex;
}
.content {
  border: 4px solid green;
  flex-grow: 1;
  margin: 5px;
}
.sidebar {
  border: 4px solid blue;
  margin: 5px 5px 5px 0;
  width: 200px;
}

 <div class="container">
  <div class="content">
    Lorem ipsum dolor sit amet.
  </div>
  <div class="sidebar">
    Lorem ipsum.
  </div>
</div>

原答案：

像

这样的块级元素会自动填充 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/

原文由 Brandon Gano 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您不知道固定部分有多大，可以使用 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;
}

原文由 fabianfiorotto 发布，翻译遵循 CC BY-SA 4.0 许可协议