CSS3 overflow-x 属性

今天代码提上去后,在测试人员给我返回了消息:上传图片的弹窗里添加很多附件时会有出框的问题。我尼玛?作为一个Java开发人员不能忍,什么鬼,什么问题都给我。前端人员呢!!!转眼一想,公司没有配置纯前端人员,好吧,自己动手改,好歹当年我也学过几天css和html之类的呢。

 一开始想到了还几种解决方法。

一、限制上传图片的张数,我们系统本是限制一次可上传最多二十张,我想给他限制成十张,这样也不会有显示的问题了吧。后来发现,JS提示的代码太深,还是js.min形式的没有任何格式可言,鉴于复杂,抛弃了这种想法。

二、直接将弹出层的style属性中的height属性去掉了,之前它是限制了500px。去掉后发现它可以随着图片的数量自动拉伸,二十张图片刚刚拉伸至满屏,感觉方法不错,心中暗暗窃喜。这种方法虽然好,但是有局限性啊。万一图片增多了,岂不是拉伸的不成样子了。而且方式有点简单粗暴、不太美观。

三、后来想起可不可以滚动呢,查文档。看到了overflow-x 这个属性,最后还是限制弹出层的height为500px,只是追加了overflow-x 为auto,问题完美解决。

 

下面说说overflow-x 的具体用法

overflow-y属性指定如果它溢出了元素的内容区是否剪辑顶部/底部边缘内容。

 

默认值:visible
继承:no
版本:CSS3
JavaScript 语法:object.style.overflowY="scroll"

 

语法

overflow-y: visible|hidden|scroll|auto|no-display|no-content;

描述
visible不裁剪内容,可能会显示在内容框之外。
hidden裁剪内容 - 不提供滚动机制。
scroll裁剪内容 - 提供滚动机制。
auto如果溢出框,则应该提供滚动机制。
no-display如果内容不适合内容框,则删除整个框。
no-content如果内容不适合内容框,则隐藏整个内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值