html - 展开宽度以占用父 div 的剩余宽度

Question

可以在 JSFiddle http://jsfiddle.net/WdZgV/ 上找到我的代码示例

CSS

<style type="text/css">
body {
    margin: 0;
    padding: 0;
}

.header_div {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.header {
    display: inline-block;
    height: 100px;
    width: 100%;
    max-width: 1000px;
    background: #ddd;
}

.logo {
    float: left;
    width: 200px;
    height: 100px;
    background: #bbb;
}

.menu {
    float: left;
    width: 800px;
    height: 100px;
    background: #999;
}
</style>

HTML

<div class="header_div">
    <div class="header">
        <div class="logo"></div>
        <div class="menu"></div>
    </div>
</div>

我想要的是，当您将窗口宽度调整为小于 1000 像素时，.menu div 将调整为父 div 的大小。

举个例子:

如果您的窗口宽度为 900px，则 .logo div 为 200px，.menu div 为 700px。

无论如何我可以用 CSS 做到这一点，还是我需要使用 Javascript？

Answer 1

是 — 删除 float，不指定 width，并将 overflow 设置为 hidden。 Example here ; .menu 变为:

.menu {
    height: 100px;
    background: #999;
    overflow: hidden;
}