zoukankan      html  css  js  c++  java
  • react-踩坑记录——页面底部多出一倍高度的空白

    挂载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{
         400%;
        height: 295px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    .list{
         100%;
        height: 295px;
        position: absolute;
        left: 0px;
    }
    .list>li {
        float: left;
         25%; 
        height: 100%;
    }
    .list_img {
        display: block;
        height: 100%;
         100%;
    } 

    解决方法:针对根组件添加样式设置⬇️

    #root{
         100%;
        height: 100%;
        overflow: scroll;
    }                  /*即index.html文件中根组件div的id值为root*/
    .contain{
         400%;
        height: 295px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    .list{
         100%;
        height: 295px;
        position: absolute;
        left: 0px;
    }
    .list>li {
        float: left;
         25%; 
        height: 100%;
    }
    .list_img {
        display: block;
        height: 100%;
         100%;
    } 

    成功解决⬇️

  • 相关阅读:
    解决Flask使用pymysql驱动的Warning: (1366, "Incorrect string value: '\xD6\xD0\xB9\xFA\xB1\xEA...'
    java中的抽象类
    java中的接口
    java中获取数组中的最大值
    java中的面向对象
    java中的数组
    java中的方法
    java中的流程控制结构
    java中的运算符
    java中的类型转换
  • 原文地址:https://www.cnblogs.com/LLLLily/p/7560454.html
Copyright © 2011-2022 走看看