最近做项目想做一个这样的效果:就是我想要内部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. mysql之存储过程(一)

    今天开发一个需求,需要在一个旧表中增加一列并且对已经的表中记录初始化新列的值, 由于是一次性的工作,故写了个存储过程来代替代码程序初始化 创建及执行过程记录如下: MySQL [XXX_YYY]> ...

  2. 依据gff切fa并翻译为蛋白质

    #!/usr/bin/python import re import sys import gzip change={'A':'T','T':'A','C':'G','G':'C','N':'N'} ...

  3. 透过微软研究院在“数据中心网络”的重大进展看SIGCOMM 2013

    2013" title="透过微软研究院在"数据中心网络"的重大进展看SIGCOMM 2013"> 编者按:于8月12日至16日在香港举行的SI ...

  4. VSTO开发中级教程 配套资源下载

    项目实例源代码: 编程过程中用到的工具.软件: 教学视频:

  5. GPIO-FPGA架构

    GPIO是一种软件运行期间能够动态配置和控制的通用引脚 有不同的GPIObank,每个GPIO口的bank都会有编号的区分, 每个GPIO口除了通用的输入输出功能以外,还有其他复用功能,例如GPIO5 ...

  6. asp.net 管道处理模式

  7. pytorch中的view函数和max函数

    一.view函数 代码: a=torch.randn(,,,) b = a.view(,-) print(b.size()) 输出: torch.Size([, ]) 解释: 其中参数-1表示剩下的值 ...

  8. Monkey命令参数介绍

    1) 参数: -p   参数-p用于约束限制,用此参数指定一个或多个包(Package,即App).指定   包之后,Monkey将只允许系统启动指定的APP.如果不指定包,Monkey将允许系统启动 ...

  9. Java中Volatile关键字详解 (转自郑州的文武)

    java中volatile关键字的含义:http://www.cnblogs.com/aigongsi/archive/2012/04/01/2429166.html 一.基本概念 先补充一下概念:J ...

  10. 国产ROM纷争升级 能否诞生终结者?

    能否诞生终结者?" title="国产ROM纷争升级 能否诞生终结者?"> 相比iOS系统的低硬件高流畅,安卓系统就显得"逼格"低了许多.先不说 ...