Html 100%宽度div，填充显示水平滚动条

我有这个CSS代码：

.topBar {
    width:100%; 
    height:70px;
    position:absolute;
    /*position:fixed;
    z-index:999;*/
    top:0; 
    left:0; 
    padding:10px;
    color:#000000;
    background-color:#eeeeee;
    border-bottom:2px solid #F36F25;
}

但因为它是100%宽，有一个10px的填充，它显示了一个水平滚动条

我如何才能阻止这种情况发生，但保持填充和100%宽度

我试过：

overflow-x: none;

---

在我的css中，但我仍然希望在屏幕太小时显示水平滚动条

您可以使用

框大小调整

css属性。将此添加到

.topBar

：

框大小：边框框


.topBar{
宽度：100%；
高度：70像素；
位置：绝对位置；
/*位置：固定；
z指数：999*/
排名：0；
左：0；
填充：10px；
颜色：#000000；
背景色：#eeeeee；
边框底部：2个实心#F36F25；
框大小：边框框；/**基本上
div.topBar
是100%+10px（x2）。因此它实际上大于100%（因此是滚动框）。通常的方法是在父级
div
中添加另一个
div
，并在其上添加
填充：10px
。另一种方法是使用
框大小：边框框
，这实际上遵守了100%规则

看看这个。
@user3424754…出现了另一个方法！红框示例是最好的跨浏览器解决方案。您找到解决问题的方法了吗？我的答案有帮助吗？