輸入元素的流體寬度

Question

我有一個頂部條（黃色）固定位置和寬度爲100％。在酒吧內，左邊div（紅色）可以是任何width（流體）。右div（綠色）包含input元素：

1. 需要有寬度爲在頂欄留下的空間（意爲：綠地面積應覆蓋所有的黃色區域，無論紅寬度）
2. 我不想添加更多html元素。所以在下面的代碼中給出了這個結構，我嘗試使用css。
3. 我可以使用js來輕鬆做到這一點，但我現在想避免它。

示例代碼： http://jsfiddle.net/qhoc/jBQDB/2/

正如你所看到的，現在我用right: 0爲.input input，它不工作。右側仍然有黃色空間。這意味着input元素寬度沒有擴大。我嘗試了position: absolute，它仍然是一團糟。

幫助表示感謝！

Answer 1

http://jsfiddle.net/thirtydot/jBQDB/3/

.input { 
    overflow: hidden; 
} 
.input input { 
    width: 100%; 
    height: 50px; 
    border: 0; 
    outline: 0; 
    /* you want this if there's any border/padding on the input */ 
    -moz-box-sizing: border-box; 
     box-sizing: border-box; 
} 

Why does overflow: hidden help?

---

還有其他的方法來做到這一點，如果你不能在你輸入的父母使用overflow: hidden，也許對，最常見的原因是需要在input:focus上的box-shadow或類似的。

下面是一個使用display: table-cell代替例如：使用

display: table; 

和

display: table-cell; 

，因爲它會自動調整http://jsfiddle.net/thirtydot/jBQDB/4/

Answer 2

嘗試。

修訂樣品：http://jsfiddle.net/2VmFT/