0
當與overflow:auto
或overflow:scroll
含div包含一系列display:inline-block
元件,使得它推動含量足夠寬,以創建一個滾動條,隨後position:absolute
帶有left:0;right:0;
的元素無法填滿可滾動視口,因此滾動包含的div也會滾動絕對定位的元素。
Fiddle(以下簡稱「結果」窗口,你得到一個水平滾動條的寬度位置,然後滾動左,右觀察.row-cover
div的背景未能延伸到滾動區域)
問題
我正在尋找一個CSS唯一的解決方案。爲了用一個元素「掩蓋」.row
,我應該做什麼樣的CSS更改,以使其下面的內容「被遮蓋」?
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
更新以包括外外容器具有overflow:hidden
禁用body
滾動
這是在頁面的溢出則不是'外container',當'溢出依賴:hidden'應用到'body'你不能滾動https://jsfiddle.net/d4mhr1ev/ 2/ – haxxxton
我已更新我的小提琴以包括一個外部外部容器,以更好地顯示此:https://jsfiddle.net/d4mhr1ev/4/ – haxxxton
這是因爲外部容器不會溢出。要使外部容器溢出,請在外部容器內添加一個外部內部容器,並改爲顯示:table。 https://jsfiddle.net/d4mhr1ev/5/ – Alohci