1、给html,body设置高度100%,overflow设置hidden,隐藏右边滚动条
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;//隐藏右侧滚动条
position: relative;
}
.container{
height: 100%;
width: 100%;
transition: all .5s;//过渡
}
.container .item{
height: 100%;
}
ul {
z-index: 1000;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);//当定位为50%时。transform减去高度的一半,就可以使盒子居中
}
.indexes li{
list-style: none;
width: 10px;
margin: 20px;
height: 10px;
border-radius: 50%;//当设置成50%是回城一个圆
background-color: azure;
}
.indexes li.active{
background: red;
}
.left-nav{
list-style: none;
<