html - 100% 宽度的 div，带有显示水平滚动条的填充

Question

我有这个 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 中，但我仍然希望在屏幕太小时显示水平滚动条

Answer 1

div.topBar 基本上是 100% + 10px (x2)。所以它实际上超过 100%(因此滚动框)。这样做的一般方法是在父级 div 中添加另一个 div 并向其添加 padding:10px。另一种方法是使用 box-sizing:border-box，它实际上遵守 100% 规则!

看看这个sample .