Html 框架内的Div 100%宽度问题

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

例如：

下面是我的代码：

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

页眉
编辑|删除
.frame{overflow-x:scroll；}
.标题{
边框：1px纯黑；
宽度：1200px；
背景：粉红色；
文本对齐：居中；
字体大小：20px；
}
.灰条{
填充：6px；
宽度：100%；
高度：20px；
背景：#e6；
明确：两者皆有；
}

您的页眉太宽，会拉伸整个框架。您必须将标题设置为100%，而不是固定的1200px，或者将灰色条设置为与标题相同的固定宽度

您尝试将标题标记的宽度设置为像素，将灰色标记设置为%。这不起作用，因为在灰色标记中，您将其称为100%，它只占据窗口的可见部分。如果要保持两个宽度相同，请更改宽度100%或宽度1200px。 提及

---

我认为您必须添加更多的标记才能实现这一点

将

.header

和

.gray bar

包装在容器中，并更改容器的宽度，而不是

。header

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

---

感谢您的解决方案，但是我们可以使用100%的包装宽度而不是1200px吗？我需要一切灵活。请引导。。。谢谢

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

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