描述
当包含overflow:auto或overflow:scroll的div包含一系列display:inline-block元素时，它会将内容推得足够宽以创建滚动条，后续的position:absolute元素left:0;right:0;无法填充可滚动视口，因此滚动包含div也会滚动绝对定位的元素。
Fiddle （定位“结果”窗口的宽度，以便获得水平滚动条，然后向左和向右滚动以观察.row-cover div的背景未能延伸到可滚动区域）
问题
我正在寻找一种仅限CSS的解决方案。我应该做什么改变，以便用一个元素“覆盖”.row，使其下面的内容被“遮盖”？
HTML
<div class="outer-outer-container">
<div class="outer-container">
<div class="row">
<div class="row-cover"></div> <!-- BACKGROUND IMAGE DOES NOT EXTEND FULL WIDTH -->
<div class="columns">
<div class="column">
<div class="column-inner">
10
</div>
</div>
<div class="column">
<div class="column-inner">
10
</div>
</div>
<div class="column">
<div class="column-inner">
10
</div>
</div>
<div class="column">
<div class="column-inner">
10
</div>
</div>
<div class="column">
<div class="column-inner">
10
</div>
</div>
</div>
</div>
<!-- FOR BREVITY THE FOLLOWING ROWS ARE MINIFIED -->
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
<div class="row"><div class="row-cover"></div><div class="columns"><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div><div class="column"><div class="column-inner">10</div></div></div></div>
</div>
</div>
CSS
html,
body{
height:100%;
margin:0;
padding:0;
}
*, :after, :before, input[type=checkbox], input[type=radio] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.outer-outer-container{
position:absolute;
top:20px;
left:20px;
right:20px;
bottom:20px;
overflow:hidden;
}
.outer-container{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow-y:scroll;
overflow-x:auto;
background-color:#f1f1f1;
}
.row{
position:relative;
width:100%;
}
.columns{
/* remove "gaps" between inline-block items */
font-size:0;
line-height:0;
white-space:nowrap;
width:100%;
}
.column{
/* reset font-size and line-height from "gaps" between inline-block items fix */
font-size:1rem;
line-height:1.4;
display:inline-block;
width:400px;
text-align:center;
vertical-align:top;
margin-left:2px;
margin-bottom:2px;
background-color:#FFF;
}
.column-inner{
height:48px;
font-size:1.2rem;
}
.row-cover{
position: absolute;
z-index: 2;
top:0;
right:0;
left:0;
bottom:0;
background:repeating-linear-gradient(-45deg,rgba(255,255,255,.5),rgba(255,255,255,.5) 25%,rgba(204,204,204,.5) 25%,rgba(204,204,204,.5) 50%,rgba(255,255,255,.5) 50%) top left fixed;
background-size: 20px 20px;
}
修改
更新为包含overflow:hidden禁用body滚动的外部 - 外部容器