如何填充剩余宽度的 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>

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/

Answer 2

尝试像这样设置位置：

<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 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

您可以将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 5

您可以在不更改标记的情况下使用 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 及以下版本不支持

也检查一下

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

它适用于所有浏览器。

Answer 6

现在有一个新的 css 属性方法，称为 calc，它可以以更灵活的方式执行此操作。

<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 7

您可以使用表格样式。 创建一个带有表格样式的 div 和子项目就是表格单元格样式

标签文字

Answer 8

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