獲得非固定寬度div以完美契合父母而不會溢出？

Question

考慮下面的代碼：

<div class='wrapper'> 
    <div class='right-panel'>Here is the article</div> 
    <div class='left-panel'> 
     <div class='left-panel-contents'> 
      <div class='headline'> 
       <h1>HEADLINE</h1> 
      </div> 
     </div> 
    </div> 
</div> 

.wrapper { 
    height: 200px; 
    min-width: 960px; 
    max-width: 1060px; 
    background: gray; 
} 
.right-panel { 
    float: right; 
    height: 200px; 
    width: 760px; 
    background: blue; 
} 
.left-panel { 
    background: green; 
    height: 200px; 
} 
.left-panel-contents { 
    position: relative; 
    background: pink; 
    height: 100%; 
    width: 15%; 
    // how do I make this fill the width of the left panel 
} 
.headline { 
    background: black; 
    color: white; 
    line-height: 45px; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1000; 
} 

h1 { 
float: right; 

} 

http://jsfiddle.net/duw4G/

我試圖讓標題文字擴大一路右側面板中。如果左側面板的內容完美地填充其父項，則可能。如果我將它設置爲100％，溢出：隱藏它不能解決問題（左側面板內容填充整個包裝div寬度）

有沒有什麼辦法可以調整我的技術來使它工作？

Answer 1

.wrapper { 
    height: 200px; 
    min-width: 960px; 
    max-width: 1060px; 
    background: gray; 
} 
.right-panel { 
    float: right; 
    height: 200px; 
     width:75%; 
    padding:0px; 
    margin:0px; 
    background: blue; 
} 
.left-panel { 
    background: green; 
    height: 200px; 
    width:25%; 
    padding:0px; 
    margin:0px; 

} 
.left-panel-contents { 
    position: relative; 
    background: pink; 
    height: 100%; 
    width: 100%; 
    // how do I make this fill the width of the left panel 
} 
.headline { 
    background: black; 
    height: 45px; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1000; 
float:left; position:relative; 
} 

Answer 2

.headline將根據與非靜態位置（即相對的或絕對的）的最近的父被定位，或到視如果沒有這樣的母體中找到。

如果不需要其他用途，請從.left-panel-contents刪除position:relative，但將其添加到.wrapper。請參閱：http://jsfiddle.net/duw4G/9/