填充父级内部的剩余宽度，该父级也填充剩余宽度答案

【问题标题】：Fill remaining width inside parent that is also filling remaining width填充父级内部的剩余宽度，该父级也填充剩余宽度
【发布时间】：2014-04-08 03:59:12
【问题描述】：

我有一个包含四个 div 的固定大小的导航栏（使用 Bootstrap）。这些 div 包含一个徽标、一些链接/下拉列表和一个搜索框：

┌────────────────────────────navbar (fixed-size)──────────────────────────────┐
│┌───logo───┐┌───dropdown───┐┌───────────links──────────┐┌────search box─────┐│
││fixed-size││  fixed-size  ││      variable width      ││  fill remaining   ││
│└──────────┘└──────────────┘└──────────────────────────┘└───────────────────┘│
└─────────────────────────────────────────────────────────────────────────────┘

我希望搜索框（最右侧的框）填充容器中的剩余空间。搜索框包含一个输入和一个按钮：

┌─────────────────────────────────┐
│┌─────────────────────┐┌────────┐│
││        <input>      ││<button>││
│└─────────────────────┘└────────┘│
└─────────────────────────────────┘

按钮具有固定大小，但我希望输入水平缩放，拉伸搜索框以填充其父级（导航栏）。

编辑：澄清一下，我希望搜索框占据其兄弟（徽标、下拉列表和链接）占用空间后留下的（水平）空间。由于搜索框由输入和按钮组成，并且按钮将具有固定宽度，因此我希望输入扩展并推动搜索框的边界，直到搜索框填满其兄弟姐妹留在导航栏中的空间

【问题讨论】：

你试过让宽度：100%吗？
这会破坏浮动元素，因为它会告诉搜索框占用导航栏宽度的 100%。
这个例子可以帮到你：bootply.com/128162

标签： html css twitter-bootstrap

【解决方案1】：

我会这样做：http://jsfiddle.net/vU52q/

你有你的包装和子元素：

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

然后将容器设置为position: relative;，将提交按钮设置为position: absolute;，并为容器提供足够的填充按钮。

.search {
    box-sizing: border-box;
    background: #0f0;
    padding: 5px 100px 5px 5px;
    position: relative;
    width: 300px;
}
.search input {
    width: 100%;
}
.search button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 85px;
}

这样，输入总是父元素的宽度减去固定宽度按钮的宽度。

您也可以使用内联对齐和 css calc，但这是我的首选方式。

如果你想玩 calc，你可以看看这个，它可能会提供更多的选项来添加额外的固定大小元素：http://jsfiddle.net/ug7a9/

这会考虑每个部分并明确将其添加到宽度计算中。

<div class="search">
    <button type="submit">Go</button><!--
    --><button type="submit">Go</button><!--
    --><input type="text" /><!--
    --><button type="submit">Go</button>
</div>

cmets 用于防止.search 元素上的元素之间出现空格（您也可以设置字体大小：0）。

* {
    box-sizing: border-box;
}
.search {
    background: #0f0;
    position: relative;
    width: 300px;
}
.search input {
    display: inline-block;
    width: calc(100% - 50px - 50px - 50px);
}
.search button {
    display: inline-block;
    width: 50px;
}

您希望选择器更加明确（即不要使用*），但出于快速演示的目的，我将其放入。

【讨论】：

很抱歉，我的问题可能不够清楚。您将 .search 的宽度设置为 300px。我希望 .search 的宽度（以及输入）是 .search 的兄弟姐妹（徽标、下拉列表和链接）占用了他们需要的（水平）空间时留下的空间。
所以你希望它们都是动态的？你看过这个：stackoverflow.com/questions/6938900/…？

【解决方案2】：

你可以使用计算功能，但不能跨浏览器

calc(100% - element size);

http://jsfiddle.net/8CQHP/

您可以在 caniuse.com 中查看支持

【讨论】：

【解决方案3】：

我最终更改了我的代码，并使用了 Chad 在评论中提供的解决方案中的想法来回答他的问题。我还使用了他的绝对定位按钮技巧。这就是我所做的：

我为搜索框使用了一个跨度，并将按钮从搜索框移出直接进入导航：

<nav>
    ...

    <span>
        <input type="text" placeholder="Search...">
    </span>
    <button class="searchBtn" type="button"></button>
</nav>

使用这个css：

span {
    display: block;         /*This is the trick from*/
    overflow: hidden;       /*the solution Chad provided*/
}

input {
    width: 100%;
    padding-right: 65px;    /*This is to make room*/
}                           /*for the button*/

button {
    position: absolute;
    right: 0px;
    top: 0px;
}

overflow: hidden 跨度使这一切成为可能。在这里阅读：http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

【讨论】：