Html 展开“宽度”以获取父div的剩余宽度

我的代码示例可以在JSFIDLE上找到

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>

.header_div {
 width: 1280px;
}

.header {
 display: table;
}

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

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

身体{
保证金：0；
填充：0；
}
.头分区{
显示：内联块；
宽度：100%；
文本对齐：居中；
}
.标题{
显示：内联块；
高度：100px；
宽度：100%；
最大宽度：1000px；
背景：ddd；
}
.标志{
浮动：左；
宽度：200px；
高度：100px；
背景:#bbb ;；
}
.菜单{
浮动：左；
宽度：800px；
高度：100px；
背景：#999；
}

HTML

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

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

我想要的是，当您将窗口宽度调整为小于1000px时，

.menu

div将调整为父div的大小

例如：

如果窗口宽度为900px，则

.logo

div的窗口宽度为200px，而

.menu

div的窗口宽度为700px

---

我是否可以使用CSS来实现这一点，或者我需要使用Javascript？

是-删除

浮动

，不指定

宽度

，并将

溢出

设置为

隐藏

<代码>菜单变为：

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

---

是-删除

浮动

，不指定

宽度

，并将

溢出

设置为

隐藏

<代码>菜单变为：

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

@安多尼·罗伊用这个

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

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

@安多尼·罗伊用这个

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

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

---

您可能不想使用浮动属性，但需要指定表的父级宽度和显示

如以下示例所示：

你最终会得到如下结果：

HTML

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

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

---

可以用百分比指定宽度

您可能不想使用浮动属性，而是要指定表的父级宽度和显示

如以下示例所示：

你最终会得到如下结果：

HTML

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

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

---

可以用百分比指定宽度

好了。好了。logo分区必须有200px。就这样！但是我不需要

浮点：对

。无论如何，谢谢你的帮助！.logo分区必须有200px。就是这样！但是我不需要

浮点：对

。无论如何，谢谢你的帮助！非常感谢。这就是我想要的谢谢你！这就是我要找的