Question

我正忙着让下面的事情发挥作用：

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

我的理解是，当我将元素的宽度设置为100％时，它会根据其父元素的宽度计算实际宽度（以像素为单位）（在这种情况下，div称为expanding }）。然而，我所看到的行为似乎表明它占据了父母的父母的宽度（即container）

额外问题：我怎样才能将固定元素的高度与其中包含的div高度相同（即container）。

在任何一种情况下，如果可能的话，我宁愿避免使用脚本。看起来这应该是一个普遍的要求，CSS应该立即完成它。

假设最近的浏览器，特别是IE9或更高版本。

Answer 1

宽度相对于父级。 input的父级是div，默认情况下div是块级元素，宽度为100％）因此div是其容器的100％（ #container div。在这种情况下，浮动元素#fixed对#expanding的宽度没有影响。

使用表格布局或使用calc计算剩余空间：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

显然，由于默认情况下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>

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

2 个答案: