这个是我工作中遇到的一个问题，困扰了我好几天，彻底理解了什么叫思路很重要。

黄色盒子里的内容是要超出出现滚动条的，红色的方块是根据另外的元素去定位的，于是呢 我就加上了 overflow-y：auto;然后出现了下面这幕。

会发现红色放开溢出之后出现了 滚动条，然后我又改成了这样

让x轴溢出之后不剪切任何内容也不出现滚动条，你们觉得是解决了吗？我满心欢喜的查看了效果，依然没有解决，苦恼了几天各种的 搜寻答案，其实这种y轴滚动条x轴溢出显示的效果 是做不到的，如果有人能做到 教我。

于是呢 我想出了另外一个办法：

给最外层的容器设置overflow:auto,当超出容器的时候让其可以滚动，然后让滚动条不可见

这样超出之后页面也可以滚动 方块也同时存在，我真的很感慨，写代码真的  思路很重要！！！

css y轴溢出滚动条，x轴溢出显示的更多相关文章

  1. css 溢出滚动条显示，修改滚动条样式

    文本或者内容溢出滚动条显示: a/横纵都出滚动条:css添加属性{overflow:auto;} b/横向滚动条:css添加属性{overflow-x:auto;} c/纵向滚动条:css添加属性{o ...

  2. css单行文本及多行文本溢出显示省略号

    关于文本溢出的相关属性: 1. text-overflow: clip|ellipsis|string;   该属性规定当文本溢出包含元素时发生的事情. clip : 修剪文本. ellipsis : ...

  3. Android立体旋转动画实现与封装（支持以X、Y、Z三个轴为轴心旋转）

    本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...

  4. echarts x轴 增加滚动条

    charts x轴 增加滚动条 在option 配置项中添加 [ dataZoom 中配置 ] 设置x轴滚动条 效果图: 动态拖动 以下参考代码 dataZoom配置 官网写法 option = { ...

  5. 【转】如何用css限制文字长度,使溢出的内容用省略号…显示

    文章转自这里(现在貌似被黑了,建议不要点击了) ps:因在该地方没看到转载按钮,复制下存到这里以待自己方便,别人能看到帮助一下更是乐意之至,效果亲测可以实现,兼容IE.谷歌.火狐 由于文字内容长度的不 ...

  6. css单行文本和多行文本溢出实现省略号显示

    1.单行文本溢出 文本内容 <div class="singleLine"> HelloWorldHelloWorldHelloWorldHelloWorldHello ...

  7. HTML横向滚动条和文本超出显示三个小圆点

    我们这次要说的就是:现在有很多的公司以及很多的app软件经常使用的两个方法横向滚动条和文本超出三个小圆点 横向滚动条:顾名思义嘛,就是能够一块内容可以横着滑动. 文本超出三个小圆点:文本超出就是当文本 ...

  8. css之让文字在一定范围内显示，不超过固定的宽度和高度

  9. 转css中文英文换行、禁止换行、显示省略号

    css中文英文换行.禁止换行.显示省略号 原创 2016年08月09日 14:20:01   word-break:break-all;只对英文起作用,以字母作为换行依据 word-wrap:brea ...

随机推荐

  1. Linux指令--ifconfig

    许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口配置信息并对此进行修改.Linux系统拥有一个类似的工具,也就是ifconfig(interfaces config).通常需 ...

  2. 【转】C++易混知识点1： 指针常量和常量指针的区别，附有详细案例解释

    熟悉C++也已经有一些年头了,今天突然翻出当年浏览的书籍,对一些概念居然生疏了,指针常量和常量指针由于 指针 这一特殊的对象而变得难以区别.因此,在思考再三之后,决定写下该篇总结,加强对他们的区别: ...

  3. 康盛（discuz ）牛逼的PHP加解密算法函数

    1.前言 康盛的 authcode 函数很牛叉,是一个具有有效期的加解密函数,同一个字符每次加密所产生的结果都是不一致的,并且可以自定义设置过期时间. 设计原理:authcode 是使用异或运算进行加 ...

  4. JavaWeb项目架构之Kafka分布式日志队列

    架构.分布式.日志队列,标题自己都看着唬人,其实就是一个日志收集的功能,只不过中间加了一个Kafka做消息队列罢了. kafka介绍 Kafka是由Apache软件基金会开发的一个开源流处理平台,由S ...

  5. 使用Python读写csv文件的三种方法

    Python读写csv文件 觉得有用的话,欢迎一起讨论相互学习~Follow Me 前言 逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是 ...

  6. 单元测试系列：Mock工具之Mockito实战

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6780719.html 在实际项目中写单 ...

  7. WebStorm11

    1.下载补丁 1.下载地址:http://pan.baidu.com/s/1gdnrdWv 2.拷贝下载的文件 JetbrainsCrack.jar 到 /bin目录下(是指你的软件安装根目录) 2. ...

  8. HDU 4372 Count the Buildings [第一类斯特林数]

    有n(<=2000)栋楼排成一排,高度恰好是1至n且两两不同.现在从左侧看能看到f栋,从右边看能看到b栋,问有多少种可能方案. T组数据, (T<=100000) 自己只想出了用DP搞 发 ...

  9. 51Nod 1225 余数之和 [整除分块]

    1225 余数之和 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  关注 F(n) = (n % 1) + (n % 2) + (n % 3) + ... ...

  10. Windows Server 2016-WinSer2016 Active Directory新增功能

    Windows Server 2016 Active Directory 域服务 (AD DS)新增很多功能用来提升Active Directory域及组织环境安全等,并帮助他们面向云的部署或混合部署 ...