最近做项目想做一个这样的效果:就是我想要内部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. POJ-2528 Mayor's posters(线段树区间更新+离散化)

    http://poj.org/problem?id=2528 https://www.luogu.org/problem/UVA10587 Description The citizens of By ...

  2. c++与c语言的区别部分

    1.new       <malloc> delete    <free> 2.多态: 重载 <函数     操作符>   类似于c中的变化参数 虚函数 3.模板 ...

  3. 存储映射I/O函数

    1.void  * mmap((void *addr, size_t length, int prot, int flags, int fd, off_t offset) 参数: addr:用于指定映 ...

  4. POJ2352 Stars [树状数组模板]

    题意:输入一n颗星星的x,y坐标,给定判断level的标准,即某颗星星左下边(不高于它,不超过他,相当于以他为基准的第三象限)星星的数目为level, 输出level从0到n的星星个数. //poj2 ...

  5. 浙江省第十六届大学生ACM程序设计竞赛部分题解

    E .Sequence in the Pocket sol:将数组copy一份,然后sort一下,找寻后面最多多少个元素在原数组中保持有序,用总个数减去已经有序的就是我们需要移动的次数. 思维题 #i ...

  6. 体验vSphere 6之1-安装VMware ESXi 6 RC版(转载)

    体验vSphere 6之1-安装VMware ESXi 6 RC版 在2015年,各个公司都会发布一系列新的产品,例如Microsoft会发布Windows 10,VMware会发布vSphere 6 ...

  7. RNA sequence单分子直测技术

    生命组学 按照功能分类遗传物质,可能的分类有系统流.操作流.平衡流等等.下面是使用该理论解释DNA与RNA的关系: DNA和RNA有很大不同,DNA存储遗传信息,作为生命活动的最内核物质,如同操作系统 ...

  8. Java IO: 字节和字符数组

    原文链接  作者: Jakob Jenkov   译者:homesick 内容列表 从InputStream或者Reader中读入数组 从OutputStream或者Writer中写数组 在java中 ...

  9. 吴裕雄--天生自然python学习笔记:Python3 错误和异常

    语法错误 Python 的语法错误或者称之为解析错,是初学者经常碰到的,如下实例 >>>while True print('Hello world') File "< ...

  10. <JZOJ1286>太空电梯

    一道简单可爱的dp #include<cstdio> #include<iostream> #include<cstring> #include<algori ...