展开宽度取父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有200像素和.menu div有700像素。

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

Answer 1

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

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

Answer 2

@Andoni罗伊使用此

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

您可以指定百分比宽度。