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- ...
随机推荐
- Linux基础篇三:文件系统
/bin 实际上是 /usr/bin /sbin 实际上是 /usr/sbin /usr/bin 里面的命令其实是依赖 /lib64 或者 /lib32 ldd /us ...
- day31-hmac模块检测客户端是否合法
#如果客户端知道服务端的ip地址和端口,就可以连接服务端,信息不安全. #使用os.urandam随机生成32位bytes,然后hmac加密之后再发送给客户端. #server: import soc ...
- scala编程(八)——函数和闭包
当程序变得庞大时,你需要一些方法把它们分割成更小的,更易管理的片段.为了分割控制流,Scala 提供了所有有经验的程序员都熟悉的方式:把代码分割成函数.实际上,Scala 提供了许多 Java 中没有 ...
- python语法基础-网络编程-HTTP协议
############### HTTP协议 ############## """ 当你在浏览器地址栏敲入“http://www.cnblogs.com/”, ...
- King of the Waves
You are organising a king of the hill tournament, the Buenos Aires Paddleboarding Competition (BAPC) ...
- 《C Prime Plus》第十节笔记
数组和指针 10.1 数组 10.1.1 初始化数组 标量变量:只储存单个值的变量 创建只读数组,应该用const声明和初始化数组 const int days[] = {1,2,3,5}; 省略方括 ...
- Users组权限Win7虚拟机继承Administrator的个性化设置
在administrator账号下进行的模板设置,配置文件保存在“C:\Documents and Settings\Administrator”文件夹下的profile里面,但是创建的用户虚拟机获取 ...
- 使json或字典输出更美观
这里是选取的项目中部分代码,但是关于json或字典格式化输出的代码是完整的def send_post(url, data): 使用json.dumps()后数据被转成了str类型,如果还要对该数据像字 ...
- 64位WIN7 配置IIS遇到问题
App_global.asax.sr8_llzl.dll' -- '拒绝访问. 设置c:windows\temp 目录访问权限 temp--> 属性-->安全-- > 添加IIS_I ...
- Redis 事物、悲观、乐观锁 (详细)
1,概论 事物这东西相信大家都不陌生吧,在学习Spring,Mybatis等框架中, 只要是涉及到数据存储和修改的,都会有事物的存在, 废话就不多说了下面我们来简单的介绍下Redis事物以及锁. 2, ...