html - 输入元素填充其容器的剩余宽度

Question

这个问题经常被问到，但到目前为止，没有任何解决方案对我们有所帮助。 form 的宽度设置为 100%，holder 的相对宽度为 10%，现在我想通过 input_edit 填充所有“自由”宽度。有人能帮我吗？谢谢!!

这是我的 HTML

<form>
    <textarea rows="4" name="in" class="input_edit"> </textarea>
    <div id="holder"></div>
</form>

还有我的 CSS

form {
width: 100%;
overflow: hidden;
} 
.input_edit {

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; 

width: auto;

background-color: transparent;
box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
border: 5px solid #666; 
margin: 5px;
border-radius: 5px;
height: 60px;

float: left;

}
#holder { 
border: 5px dashed #666; 
border-radius: 5px;

margin: 5px;
width: 10%; 
height: 60px; 
float: right;
}

编辑:

holder 目前是 10%，但我希望它被隐藏，例如在移动设备上，所以我不能使用 100-10=90%，还有问题是 box-sizing

Answer 1

CSS3 width: calc(90% - 30px); 可以工作——但是支持它的浏览器数量非常有限。

下一个最佳解决方案可能是使用 jQuery(或 JavaScript)手动计算正确的宽度。像这样的东西:

 $(".input_edit").width($("form").width() - $("#holder").width() - 40);

然后每当 form 的宽度改变时更新它。