overflow-y:auto/hidden/scroll和overflow-x:visible组合渲染异常
最近做项目想做一个这样的效果:就是我想要内部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组合渲染异常的更多相关文章
- 【总结整理】overflow: auto/hidden;清除自己
.top-nav{ font-size: 12px; font-weight: bold; list-style-type: none; border-bottom: 8px solid #DC4E1 ...
- overflow:auto/hidden的应用
一.自适应两栏布局 <!DOCTYPE html><html lang="zh-CN"><head> <meta charset=&quo ...
- overflow: auto 图片自适应调整
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ionic hidden scroll bar
ionic 项目中隐藏所有的ion-content滚动条 在variables.scss文件中添加以下代码 ::-webkit-scrollbar { display: none; }
- nightwatch.js - scroll until element is visible
.getLocationInView() Determine an element's location on the screen once it has been scrolled into vi ...
- CSS属性之 -- overflow
overflow可以实现隐藏超出对象内容,同时也有显示与隐藏滚动条的作用,overflow属性有四个值:visible (默认), hidden, scroll, 和auto.同样有两个overflo ...
- 转: CSS中overflow的用法
Overflow可以实现隐藏超出对象内容,同时也有显示与隐藏滚动条的作用,overflow属性有四个值:visible (默认), hidden, scroll, 和auto.同样有两个overflo ...
- css控制标题长度超出部分显示省略号
width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...
- CSS 笔记——背景布局
4. 背景布局 -> 背景 (1)background 基本语法 background : background-color || background-image || background- ...
随机推荐
- Servlet中转发和重定向的路径问题以及表单提交路径问题
一.请求转发与响应重定向的种类 有两种方式获得Servlet转发对象(RequestDispatcher):一种是通过HttpServletRequest的getRequestDispatcher() ...
- OfficeCommandbarDesigner20170202.rar
OfficeCommandbarDesigner用于对Office各个常用组件.VBE的工具栏进行查看和编辑的工具. 界面主要分为上下两个表格控件,上面的控件列举出所有Commandbar,下面的控件 ...
- 使用ArcGIS实现WGS84经纬度坐标到北京54高斯投影坐标的转换
[摘 要] 本文针对从事测绘工作者普遍遇到的坐标转换问题,简要介绍ArcGIS实现WGS84经纬度坐标到北京54高斯投影坐标转换原理和步骤. [关键词] ArcGIS 坐标转换 投影变换 1 坐标转换 ...
- Redis为什么这么快以及持久化机制
1.首先我们谈一下为什么Redis快: 一. Redis是纯内存数据库,一般都是简单的存取操作,线程占用的时间很多,时间的花费主要集中在IO上,所以读取速度快. 二. 再说一下IO,Redis使用的是 ...
- HTML语言 网页制作-----标签、表格、表单、框架
一:序 Html静态网页,内容(hyper text markup language,超文本标记语言) Css 网页美化 Javascript 脚本语言 二:html的介绍 <!DOCTYPE ...
- top和margin-top的区别
1.top等为绝对定位,需与position:absolute一起用才有效:而margin-top为相对定位: 2.绝对定位一般情况下以body为标准:若父元素设置position:relative, ...
- MySQL中的GIS几何函数和空间分析函数
MySQL空间扩展不仅提供了空间数据的存储能力,而且还具备一些空间运算能力,这些功能通过MySQL内建的几何函数实现.最简单的几何函数昨天已经有所涉及,也就是转换WTK的GEOMFROMTEXT和AS ...
- cs231n spring 2017 lecture11 Detection and Segmentation
1. Semantic Segmentation 把每个像素分类到某个语义. 为了减少运算量,会先降采样再升采样.降采样一般用池化层,升采样有各种“Unpooling”.“Transpose Conv ...
- deeplearning.ai 改善深层神经网络 week2 优化算法
这一周的主题是优化算法. 1. Mini-batch: 上一门课讨论的向量化的目的是去掉for循环加速优化计算,X = [x(1) x(2) x(3) ... x(m)],X的每一个列向量x(i)是 ...
- cs231n spring 2017 lecture3 Loss Functions and Optimization
1. Loss function是用来量化评估当前预测的好坏,loss function越小表明预测越好. 几种典型的loss function: 1)Multiclass SVM loss:一般的S ...