填充包含元素的剩餘寬度

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）

注意，輸入元素具有邊框圍繞它開始計算，因此需要box-sizing:border-box;以在總元素寬度內包含邊框。

• 在IE8及其以下版本中無法識別Calc（）。
• 它也不適用於某些尚未更新的舊版Android手機。
• 最佳做法是使用某種回退來優雅降級，具體取決於您的具體使用情況。