html - 让非固定宽度的 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

.headline将根据最近的具有非静态位置（即相对或绝对）的父级定位，或者如果没有找到这样的父级，则定位到视口。

如果其他目的不需要它，请从 中删除position:relative但.left-panel-contents将其添加到.wrapper. 见：http: //jsfiddle.net/duw4G/9/

Answer 2

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