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- ...
随机推荐
- 搜刮一些开源项目的APP
iOS完整App资源收集 <iOS完整app资源收集> <GitHub 上有哪些完整的 iOS-App 源码值得参考?> <GitHub 上有哪些完整的 iOS-App ...
- iTOP-4418开发板_重实力_优势突出_有原理图源码开源
核心板参数 尺寸:50mm*60mm 高度:核心板连接器组合高度1.5mm PCB层数:6层PCB沉金设计 4418 CPU:ARM Cortex-A9 四核 S5P4418处理器 1.4GHz 68 ...
- 七、linux-mysql下mysql增量备份与恢复
1.备份的意义 运维工作:保护公司的数据 . 网站7*24小时服务 但相当来说,数据更加重要,而数据最核心的就是数据库数据,所以数据库的备份和恢复就显得十分重要. 2.备份的几个参数 mys ...
- 吴裕雄--天生自然python Google深度学习框架:MNIST数字识别问题
import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data INPUT_NODE = 784 ...
- crm项目-stark组件分析
############### stark组件 ################ """ 这个stark组件是非常神奇的 1,独立的一个组件 2,没有mod ...
- 让Spring不再难懂-mvc篇
spring mvc简介与运行原理 Spring的模型-视图-控制器(MVC)框架是围绕一个DispatcherServlet来设计的,这个Servlet会把请求分发给各个处理器,并支持可配置的处理器 ...
- Fourier级数
目录 Fourier级数 函数的Fourier级数的展开 Fourier级数习题: Fourier级数 函数的Fourier级数的展开 Euler--Fourier公式 我们探讨这样一个问题: 假设\ ...
- 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上做 ...
- Linux下重要文件
1:/etc/sysconfig/network-scripts/ifcfg-ens130 2: /etc/resolv.conf DNS配置文件 3:/etc/hosts 4:/etc/sy ...
- VM Storage Policies深度解析