* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
position: relative;
}
body {
overflow-y: scroll;
}
/* ------------------------ */
.container_1 {
width: 100%;
height: 100%;
position: relative;
opacity: 0.5;
}
.container_2 {
overflow: auto;
height: 100%;
width: 400%;
}
.container_2:after {
display: table;
height: 0;
clear: both;
}
.container_2>.item_1 {
float: left;
width: 25%;
height: 100%;
border: 5px dotted #888;
}
/* ------------------------ */
.div_1 {
height: 2000px;
width: 100%;
background-color: #AAA;
}
<body>
<div class="container_1">
<div class="container_2">
<div class="item_1">
</div>
<div class="item_1">
</div>
<div class="item_1">
</div>
<div class="item_1">
</div>
</div>
</div>
<!-- -->
<div class="div_1">
...................
</div>
</body>
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
position: relative;
}
body {
overflow-y: scroll;
}
/* ------------------------ */
.container_1 {
width: 400%;
height: 100%;
position: relative;
display: table;
}
.container_2 {
display: table-row;
}
.container_2>.item_1 {
width: 25%;
display: table-cell;
border: 5px dotted #888;
}
/* ------------------------ */
.div_1 {
height: 2000px;
width: 100%;
background-color: #AAA;
}
<body>
<div class="container_1">
<div class="container_2">
<div class="item_1">
</div>
<div class="item_1">
</div>
<div class="item_1">
</div>
<div class="item_1">
</div>
</div>
</div>
<!-- -->
<div class="div_1">
</div>
</body>
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
position: relative;
}
body {
overflow-y: scroll;
}
/* ------------------------ */
.container_1 {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
}
.container_2 {
overflow: auto;
height: 100%;
width: 400%;
}
.container_2:after {
display: table;
height: 0;
clear: both;
}
.container_2>.item_1 {
float: left;
width: 25%;
height: 100%;
border: 5px dotted #888;
}
/* ------------------------ */
.container_1_bg {
width: 100%;
height: 100%;
}
/* ------------------------ */
.div_1 {
height: 2000px;
width: 100%;
background-color: #AAA;
}
<body>
<div class="container_1_bg">
作為(container_1)的空間佔位
</div>
<div class="container_1">
<div class="container_2">
<div class="item_1">
</div>
<div class="item_1">
</div>
<div class="item_1">
</div>
<div class="item_1">
</div>
</div>
</div>
<!-- -->
<div class="div_1">
...................
</div>
</body>
