展開寬度取父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; 
} 

您可以指定百分比寬度。