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

黄色盒子里的内容是要超出出现滚动条的，红色的方块是根据另外的元素去定位的，于是呢 我就加上了 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. Git知识总览(四) git分支管理之rebase 以及 cherry-pick相关操作

    上篇博客聊了<Git知识总览(三) 分支的创建.删除.切换.合并以及冲突解决>,本篇博客我们主要来看一下 rebase 变基相关的操作.rebase 操作和 merge 操作最终都可以达到 ...

  2. 腾讯工程师教你玩转 RocksDB

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯云数据库内核团队 原文标题:[腾讯云CDB]教你玩转MyRocks/RocksDB-STATISTICS与后台线程篇 0. Intro ...

  3. Hive环境搭建

    hive 环境搭建需要hadoop的环境.hadoop环境的搭建不在这里赘述.参考:http://www.cnblogs.com/parkin/p/6952370.html 1.准备阶段 hive 官 ...

  4. Storm Topology Parallelism

    Understanding the Parallelism of a Storm Topology What makes a running topology: worker processes, e ...

  5. C++ concurrency in action 读随记1

    翻了翻,感觉标准库支持的并发应该是kernel level 的(书里也没有明确写,不过他写了诸如"操作系统来安排""需要知道硬件支持多少线程"等等话语,所以猜测 ...

  6. java的优势解读

    1. java确定每种基本类型所占存储空间的大小.它们的大小不会像大多数语言那样随机器硬件架构的变化而变化.这种所占存储空间大小的不变性是java程序比用其他大多数语言编写的程序更具有可移植性的原因之 ...

  7. 安卓中圆角背景图被拉伸的解决方案——.9.png

    举个例子: 从网上找了一张图片 如果我们直接用这张蓝色的图来做登录按钮的背景.将这个图片设为背景以后 我们可以发现四个角全部变形了,一点也不美观.针对此问题,我们通过.9图来解决. 首先我们先了解一下 ...

  8. ECMAScript 6 笔记（二）

    ES6中的基本扩展 一.字符串的扩展 1. 字符的Unicode表示法 用两个双字节的形式表达字符时,如果直接在\u后面跟上超过0xFFFF的数值(比如\u20BB7),JavaScript会理解成\ ...

  9. block,inline,inline-block的区别

    最近正在复习,紧张地准备几天后的笔试,然后刚好看到这个地方. block:块级元素,会换行,如div,p,h1~h6,table这些,可以设置宽高:    inline:行内元素,不换行,挤在一行显示 ...

  10. MySQL数据库基础

    MySQL数据库基础 本文的所有操作是基于CMD环境,MySQL通过在命令行中输入SQL语句对数据库进行操作.配置问题可参考<打通MySQL的操作权限>中的内容,该文算是针对前期的环境配置 ...