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

黄色盒子里的内容是要超出出现滚动条的，红色的方块是根据另外的元素去定位的，于是呢 我就加上了 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. Servlet--Servlet接口

    servlet主要数据结构 Servlet 接口:主要定义了servlet的生命周期方法 ServletConfig接口:为servlet提供了使用容器服务的若干重要对象和方法. ServletCon ...

  2. WebSphere--用户简要表

     Application Server 含有 com.ibm.servlet.personalization.userprofile 软件包中的类,这些类使维护关于 Web 站点访问者的持久信息和利用 ...

  3. 在Tomcat中配置单点登录

    单点登录:Single Sign-On .概述 一旦你设置了realm和验证的方法,你就需要进行实际的用户登录处理.一般说来,对用户而言登录系统是一件很麻烦的事情,你必须尽量减少用户登录验证的次数.作 ...

  4. 错误：This function has none of DETERMINISTIC... 的解决

    问题: 在MySQL创建了一个批量插入的存储过程,在代码中调用的时候报错误信息: error code [1418];This function has none of DETERMINISTIC, ...

  5. selenium-java web自动化测试工具

    本篇文章由来,这两天整理了下自己经常使用而且很熟练的项目,今天突然想起漏了一个,补上了,但想到还没对应的博客,那就写一个简单的 我经常使用且相对熟练的部分技术如下(不知道算不算各位大神眼中的辣鸡): ...

  6. 跟我一起读postgresql源码(十五)——Executor(查询执行模块之——control节点(上))

    控制节点 控制节点用于完成一些特殊的流程执行方式.由于PostgreSQL为査询语句生成二叉树状的査询计划,其中大部分节点的执行过程需要两个以内的输入和一个输出.但有一些特殊的功能为了优化的需要,会含 ...

  7. 前端之基础css

    一.anchor伪类,用于阅读文章. a:link(没有接触过的链接),用于链接常规状态 (末访问的链接)a:hover(鼠标放在链接上的状态) 用于产生视觉效果(已访问的链接)a:visited(访 ...

  8. Android Training Note

    版本适配 Tip:为了能在几个Android版本中都能提供最好的特性和功能,你应该在你的app中使用Android Support Library,它能使你的app能在旧平台上使用最近的几个平台的AP ...

  9. 关于OMAPL138烧写程序的说明

    相信很多朋友在用CCS调试OMAPL138开发板的时候,肯定遇到了许许多多的问题: 例如: 1.CCS安装不完整,导致有些功能无法使用 2.ARM端没有加载gel文件,使得程序无法被唤醒 3.ccxm ...

  10. spring之setter注入

    setter注入分为2种 第一:普通属性注入 <bean id="userAction" class="com.xx.action.UserAction" ...