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

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

    接口(interface)的概念,掌握接口很重要,以后所有的编程都要面向接口编程.其实接口的内涵就7个字:规范和实现分离. 抽象类是从多个类中抽象出来的模板,若要将这种抽象进行得更彻底,就得用到一种特 ...

  2. 关于 tomcat 配置时遇到的问题与警告及解决办法

    首先,我们在日常配置 tomcat 时,总是会遇到这样的问题: 有时候我们会重新头来配置 tomcat,但是现在我们并不需要那么做,方法很简单,请继续往下看: 这个问题是告诉我们 tomcat 在 4 ...

  3. Oracl Over函数

    Oracl Over函数 简介 在介绍Over之前, 必须提到开窗函数, 与 聚 合函数一样, 开窗函数也是对行集组进行聚合计算, 但是它不像普通聚合函数那样每组只返回一个值, 开窗函数可以为每组返回 ...

  4. SSMS 2005 连接 SQL SERVER 2008问题

    用本机的 Microsoft SQL Server Management Studio 2005 客户端连接数据库服务器时报错:"This version of Microsoft SQL ...

  5. Git分支高级管理[四]

    标签(linux): git 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 切换分支 git checkout 撤销对文件的修改 git checkout -- ...

  6. Macaca拓展自己控件的方法

    https://github.com/macacajs/wd.py/blob/3bc4334bcb68733cb230b59d6164110053fd1c16/tests/macaca/test_ut ...

  7. Linux中变量#,@,0,1,2,*,$$,$?的意思

    $# 是传给脚本的参数个数 $0 是脚本本身的名字 $1 是传递给该shell脚本的第一个参数 $2 是传递给该shell脚本的第二个参数 $@ 是传给脚本的所有参数的列表 $* 是以一个单字符串显示 ...

  8. jQuery选择器概述

    1.基本选择器:1) #id : 根据给定的id匹配一个元素:2) .class: 根据给定的类名匹配元素:3)element: 根据给定的元素名匹配元素:4)* : 匹配所有元素:5)selecto ...

  9. 分布式唯一id：snowflake算法思考

    匠心零度 转载请注明原创出处,谢谢! 缘起 为什么会突然谈到分布式唯一id呢?原因是最近在准备使用RocketMQ,看看官网介绍: 一句话,消息可能会重复,所以消费端需要做幂等.为什么消息会重复后续R ...

  10. VUE2.0增删改查附编辑添加model(弹框)组件共用

    Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言 最近一直在学习Vue,发现一份crud不错的源码 预览链接 https://taylorchen709.github.io/vue- ...