<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box">
<div class="left">
</div>
<div class="right">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</div>
</div>
</body>
</html>
<style>
.box {
background-color: #21201a;
white-space: nowrap;
position: fixed;
width: 100%;
top: 100px;
bottom: 100px;
}
.left {
width: 100%;
height: 100%;
background-color: #1e5cff;
display: inline-block;
}
.right {
width: 100%;
height: 100%;
background-color: #1aff5a;
display: inline-block;
overflow: hidden;
transform: translate3d(-500px,0,0);
}</style>应用场景
1、在需要固定侧导航栏的应用场景中
2、手机适配有的
一个div需要固定在屏幕中间，上下各留白，比如top:100px;bottom:100px,
那么对于长短不一的手机，均会上下各留100px，
