Css 如何填充剩余宽度的100%

是否有任何工作可以按照预期完成类似的工作？ 我希望有这样的宽度：余数；或宽度：100%-32px

宽度：自动；不起作用

我认为唯一可行的方法是使用填充/边距、负值、浮点或一些html标记。我还尝试了display:block

我希望得到与此相同的结果，没有表格

最新答复：

这里的答案很古老。如今，使用flexbox可以轻松实现这一点：

.集装箱{ 边框：4倍纯红； 显示器：flex； } .内容{ 边框：4倍纯绿； 柔性生长：1； 保证金：5px； } .侧边栏{ 边框：4px纯蓝色； 保证金：5px 5px 5px 0； 宽度：200px； } Lorem ipsum dolor sit amet。 乱数假文。

---

尝试如下设置位置：

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

---

这应该对您有帮助：

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

这是假设您将从示例中重叠的最终结果中删除3px边框，因为边框宽度不包括在宽度中。

您可以将固定div放在填充div中

---

示例：

您可以通过使用以下内容的“显示：表格”属性来实现此目的，而无需更改标记：

.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;
}

检查没有水平滚动条的实时示例

另一个例子，但以更好的方式检查：

注意：它在IE7及以下版本中不起作用

也检查一下这个

---

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

对于任何查看过它的人来说，现在有一种新的css属性方法，称为calc，它可以以更灵活的方式执行此操作

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

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

您可以使用表格样式。 创建具有表格样式和子项的div，即表格单元格样式

---

labeltext如果您不知道固定部件有多大，可以使用flex 9999 hack

.集装箱{ 显示器：flex； 弯曲方向：行； 柔性包装：包装； } .固定宽度{ 弹性：1； } .可变宽度{ 弹性：9999； }

---

将蓝色div向右浮动，绿色将自然扩展以填充剩余的空间。+1我没有投票权，但这个答案很简单，不涉及任何定位问题。天哪，太简单了，我尝试过这个，但不起作用，因为我把div放在了对立面。为什么？如果将浮动的div放在第二行，它不起作用的原因是第一个div填充了整个宽度，迫使第二个div到下一行。查看更多信息。这不适用于非div元素，即使您设置了display:block；是我一个人干的，还是真的没用？在小提琴中，它占据整个宽度，而不是剩余宽度。浮动和100%宽度不属于一起。这在没有flaot:left的情况下同样有效。只在空div上有效，如果我喜欢在其中输入，问题仍然是一样的。谢谢@animuson。你说得对。那是我在摆弄时留下的一点代码。现在编辑。爱你！如此优雅的一行：

#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;
}

.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;
}

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

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

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