用 div 填充剩余宽度，没有设置大小答案

【问题标题】：Fill remaining width with div, no set sizes用 div 填充剩余宽度，没有设置大小
【发布时间】：2012-11-17 06:40:37
【问题描述】：

我见过几个这样的问题，但没有一个特别适合我的情况。我有一个标签式导航，它可以根据添加到导航中的标签数量来调整大小。然后我有第二个区域，其中包含我想要填充剩余区域的电话号码区域，从右侧延伸到左侧填充空间。

我不知道这两个对象的宽度。我对此最接近的解决方案是将导航向左浮动，然后蓝色区域在导航后面扩展，这不是我想要的，因为我希望仍然能够看到选项卡间隙之间的背景。我试过桌子，但无法让它工作。它要么只给蓝色区域它的宽度，然后给导航其余部分而不填充中间的空间，或者在另一种配置中，它会将包含表的大小折叠到两个元素组合的宽度而不填充完整的 960 像素宽度。

理想情况下，我很想找到一个 CSS 解决方案，但我并不反对 JS 或 jQuery。

【问题讨论】：

显示一些html 和css 代码。

标签： jquery css

【解决方案1】：

假设您的导航选项卡是浮动的，将overflow: hidden; 添加到深蓝色div（您要占用剩余宽度的那个）就足够了。

小演示：little link.

【讨论】：

我想我缺少的一点是溢出隐藏。这正是我所需要的。

【解决方案2】：

width: 100% 不应该这样做吗？

【讨论】：

【解决方案3】：

jsfiddle 上的工作代码here

<div class="base">
    <div class="menu">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
    <div class="extra">
        Hello is nothing but Hello
    </div>
    <br clear="all"/>
</div>

CSS：

.base{
   width:100%;
   background:#c00;
   color:#fff;
   padding-top:15px;    
}
.menu{
    float:left;
}
.menu ul li{
    float:left;
    margin-left:5px;
    margin-right:5px;
    background:#000;
    padding:3px;
    border-radius:8px 8px 0px 0px;

}
.extra{
   float:right;
}

【讨论】：