0
説明overflow:auto又はoverflow:scrollとを含むDIVは、それがスクロールバーを作成するために十分な幅コンテンツをプッシュするようにdisplay:inline-block一連の要素を含ん絶対配置divがビューポート
、後続position:absoluteを越えて延びるありません要素がleft:0;right:0;の場合、スクロール可能なビューポートを塗りつぶすことができず、包含するdivをスクロールし、絶対配置された要素をスクロールします。
Fiddle（あなたが水平スクロールバーを取得するような「結果」ウィンドウの幅を配置し、その後、左スクロール、右スクロール可能な領域に拡張することができない.row-coverのdivの背景を観察する）
質問
私はCSS専用のソリューションを探しています。 .rowの要素を「隠す」ために、要素の下のコンテンツが「覆い隠されている」ようにCSSを変更するにはどうすればよいですか？ 012スクロールbodyを無効にするoverflow:hiddenを持って外-外側の容器を含むように更新
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;
}
EDIT
'オーバーフローする場合、これは、その後、'外側container'ページのオーバーフロー時に依存しない：hidden'はあなたがhttps://jsfiddle.net/d4mhr1ev/をスクロールすることはできません 'body'に適用されます2/ – haxxxton
これをより良く表示するために、外側のコンテナを含めるように私のフィドルを更新しました：https://jsfiddle.net/d4mhr1ev/4/ – haxxxton
これは、外側のコンテナがオーバーフローしないためです。外側のコンテナをオーバーフローさせるには、外側のコンテナの内側に外側のコンテナを追加し、その代わりに表を作成します。 https://jsfiddle.net/d4mhr1ev/5/ – Alohci