填充包含元素的剩余宽度

Question

我有一个宽度为50％的元素，并且在该元素内部是另外两个元素，其中一个元素是固定的100px宽，我希望另一个元素占据包含元素的其余部分，但是不能解决它。

我想占用容器中剩余空间的元素有这个css

#header_search {float:left; width:50%}

显然50％的人没有权利。但不确定它应该是什么。

https://jsfiddle.net/mux7e7b4/

这是怎么做到的？

Answer 1

将您想要占据大部分宽度的元素赋予以下CSS，

width: calc(100% - 100px);

以下是您的示例（updated your fiddle）

的外观

请注意，input元素周围有一个边框，用于设置计算，因此需要box-sizing:border-box;才能在整个元素宽度中包含边框。

• 在IE8及以下版本中无法识别Calc（）。
• 它也不适用于一些尚未更新的旧款Android手机。
• 最佳做法是根据具体使用情况使用某种后备方式进行优雅降级。