通过css属性overflow设置元素出现滚动条

博客主要讲述div容器内容溢出时设置滚动条的情况,设定overflow: auto可按需显示滚动条。当容器在固定位置且元素多时需加滚动条,作为React组件时高度不固定,可由父组件传递props,如用页面高度减去其他元素高度来确定内容区高度。

一个div容器,如果设定了高度值,里面内容的高度超过了div容器则内容会溢出,效果如下:


如果给该div容器设定了overflow: auto; 则当内容超过div时会默认出现滚动条,如果内容没有超过,滚动条不显示:


滚动条的样式可以通过css属性来修改,这个下次再说,这里想强调的是,当一个容器在页面的某一个固定位置,而里面的元素有很多时,需要给这个容器加滚动条,但笔主在工作时遇到个小坑,这个容器需要给定一个具体的高度值才可以出现滚动条,但这个容器如果作为一个React组件,被其他组件调用时,这个高度值是不固定的,所以需要它的父级组件给它传递一个props,但正常情况下,子组件的高度父组件也不知道,这时候,传递的这个props可以是页面的高度(100vh)减去页面其他元素的高度值,举例:

页面有一个头部还有内容区,内容区是需要滚动条的,所以父级组件可以传递一个头部组件的高度值给内容区组件,这个内容区的高度可以设定:

<Content style={{height: 100vh - this.props.headerHeight;}} />
复制代码

完美实现要求:)


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值