html - 框架内的 Div 100% 宽度问题

Question

我在主框架内有两个 div(粉色和灰色)。粉色 div 的宽度固定为 1200px(这是动态的，每次加载时都可以更改为 1400px、1800px、2200px 或其他)，而灰色 div 的宽度为 100%。当您将框架滚动到右侧时，您会注意到灰色条没有 100% 到达页面末尾。请指导我如何使页面末尾的灰色条 100% 宽？

示例:http://jsfiddle.net/awaises/r3C4B/1/

下面是我的代码:

<div class="frame">
    <div class="header">Page Header</div>
    <div class="gray-bar">Edit | Delete</div>
</div>

.frame{overflow-x: scroll;}
.header{
    border:1px solid black;
    width:1200px;
    background:pink;
    text-align:center;
    font-size:20px;
    }
.gray-bar{
    padding: 6px;
    width:100%;
    height: 20px;
    background:#e6e6e5;
    clear:both;
    }

Answer 1

您的页眉太宽并且拉伸(stretch)了整个框架。你必须让你的标题 100% 而不是固定的 1200px 或者给你的灰色条与标题相同的固定宽度