用div填充剩余宽度，未设置大小

Question

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

我不知道这两个物体的宽度。最接近这一点的解决方案是让导航向左浮动，然后让蓝色区域扩展到导航后面，这不是我想要的，因为我想仍然能够看到标签间隙之间的背景。我试过桌子，但不能让它工作。它要么只给蓝色区域它的宽度，然后给导航其余的地方，而不填充中间的空间，或者在另一种配置中，它会将包含表的大小折叠为2个元素的总和的宽度，而不是填充整个960px的宽度。

​

​

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

Answer 1

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

小演示：little link。

Answer 2

难道width: 100%不应该做这个戏法吗？

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