最近做项目想做一个这样的效果:就是我想要内部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. 5)void万能指针

    函数参数为空,定义函数时,可以使用void来修饰:int fun(void) 函数没有返回值:void fun(void) 不同定义void类型的普通变量:void a     //原因是,无法确定类 ...

  2. 吴裕雄--天生自然C语言开发:数组

    ] = {1000.0, 2.0, 3.4, 7.0, 50.0}; ]; #include <stdio.h> int main () { ]; /* n 是一个包含 10 个整数的数组 ...

  3. kubernets基于容器日志的报警和服务自动恢复

    demo地址 https://github.com/cclient/kubernetes-filebeat-collector 高可用还谈不上,是对kubernete一种服务异常重启恢复的补充方案 之 ...

  4. XRichText

    XRichText是一个可以显示Html富文本的TextView.可以用于显示新闻.商品详情等场景.欢迎star.fork,提出意见. 使用 Gradle : compile 'cn.droidlov ...

  5. [LC] 557. Reverse Words in a String III

    Given a string, you need to reverse the order of characters in each word within a sentence while sti ...

  6. 吴裕雄--天生自然python学习笔记:python文档操作批量替换 Word 文件中的文字

    我们经常会遇到在不同的 Word 文件中的需要做相同的文字替换,若是一个一个 文件操作,会花费大量时间 . 本节案例可以找出指定目录中的所有 Word 文件(包含 子目录),并对每一个文件进行指定的文 ...

  7. String的compareTo用法

    String的compareTo其实就是依次比较两个字符串ASC码.如果两个字符的ASC码相等则继续后续比较,否则直接返回两个ASC的差值.如果两个字符串完全一样,则返回0.来看一下代码. publi ...

  8. ospf实验二

    R1,R2,R3为17.1.1.0网段 1. R4先做rip #rip 1 #version 2 #undo sum.. #netwokr 14.0.0.0 实验第四条 标记tag 100 在R4上做 ...

  9. jquery框架概览(一)

    参照jQuery 2.0.3版本(http://files.cnblogs.com/files/snoy/jquery-2.0.3.js")来进行的源码分析 从代码的最外层可以看到是一个II ...

  10. 吴裕雄--天生自然 python开发学习笔记:一劳永逸解决绘图出现中文乱码问题方法

    import numpy as np import matplotlib.pyplot as plt x = np.random.randint(0,20,10) y = np.random.rand ...