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 像素时，.menudiv 会调整为父 div 的大小。

举个例子：

如果您的窗口宽度为 900 像素，则.logodiv为 200 像素，而 div 为.menu700 像素。

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

Answer 1

是 — 删除float、不指定width并设置overflow为hidden。这里的例子; .menu变成：

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

Answer 2

@Andoni Roy 使用这个

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

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

Answer 3

您可能不想使用浮动属性，而是指定父宽度并显示到表格。

如下例所示：http: //jsfiddle.net/A8zLY/745/

你最终会得到类似的东西：

HTML

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

CSS

.header_div {
 width: 1280px;
}

.header {
 display: table;
}

.logo {
 display: table-cell;
 width: 280px;
}

.menu {
 display: table-cell;
 width: 1000px;
}

您可以按百分比指定宽度。