挂载slider组件后页面底部多出一倍高度的空白，如下：
slider组件内容⬇️：
class Slider extends Component{
constructor(){
super();
}
componentDidMount(){
var index = 0;
setInterval(function () {
index++;
if(index>3)
{
index=0;
$('.list').css('left','0');
}
$('.contain .list').animate({'left':index*-375 },1000)
},3000);
}
render(){
return <div className="contain">
<ul className="list">
{
this.props.slide_img.map((item,index)=>{
return <li key={index}><img className='list_img' src={item.src} alt='图片加载失败'></img></li>
})
}
</ul>
</div>
}
}
css样式⬇️：
.contain{
width: 400%;
height: 295px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.list{
width: 100%;
height: 295px;
position: absolute;
left: 0px;
}
.list>li {
float: left;
width: 25%;
height: 100%;
}
.list_img {
display: block;
height: 100%;
width: 100%;
}
解决方法：针对根组件添加样式设置⬇️
#root{
width: 100%;
height: 100%;
overflow: scroll;
} ／*即index.html文件中根组件div的id值为root*／
.contain{
width: 400%;
height: 295px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.list{
width: 100%;
height: 295px;
position: absolute;
left: 0px;
}
.list>li {
float: left;
width: 25%;
height: 100%;
}
.list_img {
display: block;
height: 100%;
width: 100%;
}
成功解决⬇️