如何使輸入元素佔用固定寬度元素旁邊的可用空間？

Question

我有一個時間熊發現了以下工作：

https://jsfiddle.net/1bq55L65/

我有一個div元素container，這需要佔用100％，其母公司的可用空間。然後，在裏面，我有一個固定寬度的元素，需要固定在右邊。固定寬度元素左側的剩餘空間將填充input文本字段。

我的理解是，當我的元件的寬度設置爲100％，它計算在基於它的父元素的寬度的像素的實際寬度（在這種情況下，div稱爲expanding）。我看到的行爲，但是，似乎表明它需要父母的父母的寬度（即container）

獎金的問題：我怎樣才能得到固定件的高度是相同的高度它包含在（即container）中。

在任何一種情況下，如果可能的話，我寧願避免使用腳本。看來這應該是一個常見的CSS要求，應該馬上完成它。

假設最近的瀏覽器，特別是IE9或更高版本。

Answer 1

寬度是相對於親本。 input的父級是div，默認情況下div是塊級元素，寬度爲100％），因此div是其容器的100％（#container div）。在這種情況下，浮動元件#fixed對#expanding的寬度沒有影響。

使用表佈局或計算的剩餘空間使用calc：

#container { 
 
    background-color:pink; 
 
    width:100%; 
 
    margin-top:60px 
 
} 
 

 
#fixed { 
 
    width: 70px; 
 
    text-align:center; 
 
    float:right; 
 
    background-color: #FFEEEE; 
 
    height:100%; 
 
    display:inline-block; 
 
} 
 

 
#expanding { 
 
    background-color:#FFDDDD 
 
} 
 

 
#inputField { 
 
    display:inline-block; 
 
    width:calc(100% - 70px); 
 
    box-sizing:border-box; 
 
}

<div id="container"> 
 
    <div id="fixed">Fixed</div> 
 
    <div id="expanding"> 
 
     <input id="inputField" type="text" value="Type here" /> 
 
    </div> 
 
</div>

顯然，因爲在默認情況下input有一些UA風格，你要麼需要重置這些或收留他們考慮因素（同樣calc需要您的目標瀏覽器支持，請參閱：http://caniuse.com/#feat=calc）..

Answer 2

在這裏可以使用display:table。我覺得這是'填補剩餘空間'的好方法。這個怎麼樣？

#container { 
 
    display:table; 
 
    background-color:pink; 
 
    width:100%; 
 
    margin-top:60px 
 
} 
 

 
#fixed { 
 
    display:table-cell; 
 
    width: 70px; 
 
    text-align:center; 
 
    background-color: #FFEEEE; 
 
    height:100%; 
 
} 
 

 
#expanding { 
 
    display:table-cell; 
 
    background-color:#FFDDDD 
 
} 
 

 
#inputField { 
 
    width:100%; 
 
}

<div id="container"> 
 
    <div id="expanding"> 
 
     <input id="inputField" type="text" value="Type here" /> 
 
    </div> 
 
    <div id="fixed">Fixed</div> 
 
</div>