react-踩坑记录——页面底部多出一倍高度的空白-优快云博客

本文介绍了一种解决挂载Slider组件后页面底部出现多余空白的方法。通过调整根组件的样式设置，实现对Slider组件布局的有效控制。

挂载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%;
}