如何使输入元素填充父级？

Question

我有以下html：

<div class="container">
    <form>
        <input class="search" type="text" />
        <button class="submit" type="submit">Go</button>
    </form>
</div>

我正在尝试将文本输入填充到容器的大小，减去将在右侧内联的Go按钮的宽度。但是，我似乎无法获得填充容器宽度的输入。我有以下css（简化）：

.container {
    height: 100%;
    position: relative;
    width: 100%;
}

.search {
    left: 0;
    position: absolute;
    right: 40px;
}

.submit {
    position: absolute;
    right: 0;
    width: 40px;
}

制作以下设计：

如何实际获取内部文本框以填充父级的宽度？不使用％，因为我需要它直接拉伸到按钮而不再使用。

Answer 1

我会选择Jquery。

$(document).ready(function(){
    var inputWidth = $('.container').width() - $('.submit').width();
    $('input').css('width', inputWidth);        
});

Answer 2

除非您使用javascript或calc，否则输入框将在按钮下方重叠，因为其设置为px和input百分比！

.search {
    left: 0;
    position: absolute;
    right: 60px;
    width:90%; /* this is the deal here*/
}

to get you started

Answer 3

对于mozilla，在.search

中添加以下css

width: -moz-available;

Answer 4

我想出了如何使用跨浏览器css：

我将输入包装在一个额外的div中：

<div class="container">
    <form>
        <div class="search-padder">
            <input class="search" type="text" />
        </div>
        <button class="submit" type="submit">Go</button>
    </form>
</div>



.container {
    height: 100%;
    position: relative;
    width: 100%;
}

.search-padder {
    padding-right: 40px;
    width: 100%;
}

.search {
    width: 100%;
}

.submit {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}