html - 如何使输入元素占用固定宽度元素旁边的可用空间？

Question

我费了好大的劲才开始工作:

https://jsfiddle.net/1bq55L65/

我有一个 div 元素 container，它需要占用其父元素 100% 的可用空间。然后，在其中，我有一个固定宽度的元素需要固定在右边。固定宽度元素左侧的剩余空间将用 input 文本字段填充。

我的理解是，当我将一个元素的宽度设置为 100% 时，它会根据其父元素的宽度计算实际宽度(以像素为单位)(在本例中，div 称为 扩展)。然而，我看到的行为似乎表明它占用了父级父级的宽度(即 container)

额外的问题:如何让固定元素的 height 与其包含的 div 高度相同(即 container).

无论哪种情况，我都宁愿尽可能避免使用脚本。看起来这应该是一个足够普遍的要求，CSS 应该立即完成它。

假设使用最新的浏览器，尤其是 IE9 或更高版本。

Answer 1

宽度是相对于父级的。 input 的父元素是 div，默认情况下 div 是 block 级元素，宽度为 100%)，因此 div 为 100它的容器百分比(#container div)。在这种情况下， float 元素#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 )..