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。

Answer 2

您应该使用box-sizing CSS属性。将其添加到.topBar：

-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;

<强> FIDDLE

此属性包括您为元素设置的宽度中的填充（如果有的话，还有边框）。因此，如果您设置width: 100%;，它将不再溢出父容器。

More info about box-sizing on MDN

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

2 个答案: