最近做项目想做一个这样的效果:就是我想要内部div x轴溢出div则显示y轴溢出div则出现滚动条
于是用到了overflow-y 和 overflow-x 这个css属性
原来以为css中直接设置就ok

{
overflow-y:scroll;
overflow-x: visible;
}

但是实际情况是并不好用 会出现两边都是scroll的情况上网上查了一下解决方案,很多都说试着将overflow-x和overflow-y放在不同的DOM元素上。但是会因为实际使用情况和逻辑上的复杂程度而变得并不好用。最终解决方案如下:
把容器的宽度去掉,让其内容自己撑开容器,这样不会出现滚动条,和横向溢出的最终目的是一样的;然后设置纵向overflow-y:scroll即可。
至于浏览器为什么会这样 就只搬运了 不详细解释


参考资料:
解决方案:https://power.baidu.com/quest...
原因:http://w3help.org/zh-cn/cause...

overflow-y:auto/hidden/scroll和overflow-x:visible组合渲染异常的更多相关文章

  1. 【总结整理】overflow: auto/hidden;清除自己

    .top-nav{ font-size: 12px; font-weight: bold; list-style-type: none; border-bottom: 8px solid #DC4E1 ...

  2. overflow:auto/hidden的应用

    一.自适应两栏布局 <!DOCTYPE html><html lang="zh-CN"><head> <meta charset=&quo ...

  3. overflow: auto 图片自适应调整

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. ionic hidden scroll bar

    ionic 项目中隐藏所有的ion-content滚动条 在variables.scss文件中添加以下代码 ::-webkit-scrollbar { display: none; }  

  5. nightwatch.js - scroll until element is visible

    .getLocationInView() Determine an element's location on the screen once it has been scrolled into vi ...

  6. CSS属性之 -- overflow

    overflow可以实现隐藏超出对象内容,同时也有显示与隐藏滚动条的作用,overflow属性有四个值:visible (默认), hidden, scroll, 和auto.同样有两个overflo ...

  7. 转: CSS中overflow的用法

    Overflow可以实现隐藏超出对象内容,同时也有显示与隐藏滚动条的作用,overflow属性有四个值:visible (默认), hidden, scroll, 和auto.同样有两个overflo ...

  8. css控制标题长度超出部分显示省略号

    width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...

  9. CSS 笔记——背景布局

    4. 背景布局 -> 背景 (1)background 基本语法 background : background-color || background-image || background- ...

随机推荐

  1. 使用idea创建spring mvc项目图文教程

    使用idea创建spring mvc项目图文教程 前言: 使用惯了eclipse的朋友,如果刚换成了idea或许有些不习惯.但是使用idea之后,就会love上idea了.本文将通过图文讲解怎么通过i ...

  2. android 9.0 http无法访问问题

    在res/xml下新建network-security-config.xml <?xml version="1.0" encoding="utf-8"?& ...

  3. 感觉自己out了

    看了公司混乱而落后的框架,想自己开发一个. 无意中到开源网站看到,开源的控件已经非常多了,基本上说应有尽有. 感叹这个知识大爆炸的年代. 自己现在是坐在井底的蛤蟆?

  4. maven中指定build一个project中几个特定的子modules

    问题由来: 一个项目可能会有多个子module,在特定情况下可能只需要build其中几个module. 例如我的项目的目录结构如下 myproject |------------module_one ...

  5. swift中的category,扩展

    1.创建选择 :swift file 2.名称:UIBarButtonItem-Extension 3.category,便利构造函数 extension UIColor { /* 1.extensi ...

  6. [LC] 520. Detect Capital

    Given a word, you need to judge whether the usage of capitals in it is right or not. We define the u ...

  7. 吴裕雄--天生自然python学习笔记:python下载安装各种模块的whl文件网址

    python下载安装各种模块的whl文件网址:https://www.lfd.uci.edu/~gohlke/pythonlibs/#lxml

  8. WIN10 蓝牙连接音箱之后,音量调节无效,音量从1-100,声音一样大,都是最大声,可以静音(解决方案)

    1.win+r,输入regedit,打开注册表2.进入路径:计算机\HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Bluetooth\Audio\AV ...

  9. Spring_IOC

    我们都知道,如果要在不同的类中使用同一个对象一般我们我们都需要在每一个类中都去new一个新的对象,也有的人会为这个对象写一个工具类,无论哪种方法都需要我们自己去创建,不但繁琐,而且相当耗损资源,所以才 ...

  10. vue使用日记

    使用vue-cli生成单页应用框架, npm run serve之后即可开始修改src目录下面的js css文件(index.html可以保持不动), 自动热部署 , 前端框架就已经搭起来了. web ...