我有这个 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 中,但我仍然希望在屏幕太小时显示水平滚动条
最佳答案
div.topBar
基本上是 100% + 10px (x2)。所以它实际上超过 100%(因此滚动框)。这样做的一般方法是在父级 div
中添加另一个 div
并向其添加 padding:10px
。另一种方法是使用 box-sizing:border-box
,它实际上遵守 100% 规则!
看看这个sample .
关于html - 100% 宽度的 div,带有显示水平滚动条的填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23397381/