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{
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%;
}
成功解决⬇️
react-踩坑记录——页面底部多出一倍高度的空白的更多相关文章
- React 踩坑记录
1.React-router error: super expression must either be null or a function 原因:引入babel后写ES6风格的代码: class ...
- react踩坑记录——使用fetch获取json数据报错
报错: 原因其实是list.json文件路径错误,该文件路径是相对于index.html的,而不是App.js或者index.js.
- 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密
你真的了解字典(Dictionary)吗? 从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...
- manjaro xfce 18.0 踩坑记录
manjaro xfce 18.0 踩坑记录 1 简介1.1 Manjaro Linux1.2 开发桌面环境2 自动打开 NumLock3 系统快照3.1 安装timeshift3.2 使用times ...
- [技术博客]iview组件样式踩坑记录
[技术博客]iview组件样式踩坑记录 iview官方文档. 在本次项目开发中,前端项目主要使用vue框架+iview组件构建,其中iview组件在使用过程中遇到了许多官方文档中没有明确说明或是很难注 ...
- SpringBoot + Shiro + shiro.ini 的踩坑记录
0.写在前面的话 好久没写博客了,诶,好多时候偷懒直接就抓网上的资料丢笔记里了,也就没有自己提炼,偷懒偷懒.然后最近参加了一个网络课程,要交作业的那种,为了能方便看下其他同学的作业,就写了个爬虫把作业 ...
- google nmt 实验踩坑记录
最近因为要做一个title压缩的任务,所以调研了一些text summary的方法. text summary 一般分为抽取式和生成式两种.前者一般是从原始的文本中抽取出重要的word o ...
- ABP框架踩坑记录
ABP框架踩坑记录 ASP.NET Boilerplate是一个专用于现代Web应用程序的通用应用程序框架. 它使用了你已经熟悉的工具,并根据它们实现最佳实践. 文章目录 使用MySQL 配置User ...
- SpringBoot+SpringSecurity+Thymeleaf认证失败返回错误信息踩坑记录
Spring boot +Spring Security + Thymeleaf认证失败返回错误信息踩坑记录 步入8102年,现在企业开发追求快速,Springboot以多种优秀特性引领潮流,在众多使 ...
随机推荐
- GitLab 环境搭建【CentOS7】
RPM安装方式 https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7 [最好给服务器分配至少4G内存] 先检查一下依赖:sshd [root@l ...
- 第一个java程序的编译
import java.io.*; public class EmployeeTest{ public static void main(String args[]){ /* 使用构造器创建两个对象 ...
- Circular view path xxx would dispatch back to the current handler URL,Check your ViewResolver setup
Circular view path xxx would dispatch back to the current handler URL 通过原因分析,造成问题有两个因素:1). 缺省转发, 2). ...
- 我眼中的正则化(Regularization)
警告:本文为小白入门学习笔记 在机器学习的过程中我们常常会遇到过拟合和欠拟合的现象,就如西瓜书中一个例子: 如果训练样本是带有锯齿的树叶,过拟合会认为树叶一定要带有锯齿,否则就不是树叶.而欠拟合则认为 ...
- Go-day02
Go程序的基本结构 ***func init() 会在main函数之前执行 1.包中的函数调用 a.同一个包中函数,直接调用 b.不同包中函数,通过包名+点+函数名进行调用 2.包的访问控制规则 a. ...
- JAVA核心技术I---JAVA基础知识(查漏补缺private,static)
一:private对于类和对象(同C++) private是只有这个类内部可以访问(类的成员函数和定义初始化) private是类之间的限制,而不是对对象的限制<重点> 同类对象是可以直接 ...
- python django基础二URL路由系统
URL配置 基本格式 from django.conf.urls import url #循环urlpatterns,找到对应的函数执行,匹配上一个路径就找到对应的函数执行,就不再往下循环了,并给函数 ...
- win7安装linux CentOS7双系统实践
开发需求要安装linux,百度了些资料,当然仅供参考,否则入坑. 步骤一 :制作Centos 7镜像文件,这步没什么坑 1.准备U盘8G以上 下载的话网上很多,这里提供一个下载路径: http:// ...
- [C#]一个简易的、轻量级的方法并行执行线程辅助类
一个简易的.轻量级的方法并行执行线程辅助类 在实际应用中,经常要让多个方法并行执行以节约运行时间,线程就是必不可少的了,而多线程的管理经常又是一件头疼的事情,比如方法并行执行异步的返回问题,方法并 ...
- Elasticsearch 集群 单服务器 超级详细教程
前言 之前了解了Elasticsearch的基本概念.将spring boot + ElasticSearch + head插件 搞通之后.紧接着对es进行下一步的探索:集群.查阅资料的过程中,找到了 ...