我花时间让以下工作：
https://jsfiddle.net/1bq55L65/
我有一个divelement container，它需要占用其父代100％的可用空间。然后，在其中，我有一个固定宽度的元素，需要将其固定在右边。固定宽度元素左侧的剩余空间将用input文本字段填充。
我的理解是，当我将元素的宽度设置为100％时，它将基于其父元素的宽度（在本例中div称为expanding）计算实际的像素宽度。但是，我看到的行为似乎表明它占用了父级父级的宽度（即container）
奖金的问题：我如何才能获得高度的固定元素是相同的高度div它包含在（即container）。
无论哪种情况，我都尽量避免使用脚本。看来这应该是CSS应当立即完成的足够普遍的要求。
假设使用最新的浏览器，尤其是IE9或更高版本。
宽度是相对于父级的。的父级input是a div，默认情况下divs是块级元素，宽度为100％），因此div是其容器（#containerdiv）的100％。在这种情况下，浮动元件#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） ..
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句