css - 如何填充 100% 的剩余宽度

Question

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

width: auto; 不起作用。

我认为唯一可能的方法是解决填充/边距、负值或 float ，或一些 html 标记 hack。我也试过显示: 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

更新后的答案:

这里的答案很旧。今天，这可以通过 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>

原答案:

像

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

关于css - 如何填充 100% 的剩余宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8252518/