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- ...
随机推荐
- Codeforces Round #598 (Div. 3)E(dp路径转移)
题:https://codeforces.com/contest/1256/problem/E 题意:给一些值,代表队员的能力值,每组要分3个或3个以上的人,然后有个评价值x=(队里最大值-最小值), ...
- day34-进程
#进程是程序的运行,程序不运行不产生进程. #1.进程的并行与并发: # 并行:是指两者同时执行,比如赛跑,两人都在不停的往前跑.(资源够用,比如三个线程,四核的cpu) # 并发:是指资源有限的情况 ...
- 使用lambda表达式优雅你的事务代码
我们在实现业务逻辑时,经常会有这种需求: 1.在当前事务A中开启新事务B,事务B中发生异常不可以回滚A,事务B成功执行后返回事务B的返回值: 2.在当前事务A中开启新事务B,事务B中发生异常要求回滚A ...
- Linux文件属性和权限
Linux文件属性 第一栏:表示文件类型和权限 文件的类型: d:目录 -:文件 l:链接文件 b:可存储设备 c:可输入设备 第一组:表示拥有者权限 第二组:表示该组的权 ...
- Java IO: 其他字符流(下)
作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) 本小节会简要概括Java IO中的PushbackReader,LineNumberReader,St ...
- FPGA底层的时钟布线以及内部layout
https://wenku.baidu.com/view/441549fef111f18582d05a70.html 全局时钟是最简单的最可预测的时钟,时钟方案:有专用的时钟输入(提供最短的始终输出延 ...
- keep pace with |sixes and sevens.|Three dozen of |setting out|in despite of|appetite for|brought up|.turn to|leave behind|As can be seen|every
Heavy but not excessive: network capacity seems to have done little more than keep pace with economi ...
- 查找openssl内存泄漏(代码)
#include <stdio.h> #include <string.h> #include <openssl/bio.h> #include <opens ...
- JS实现select去除option的使用注意事项
网上讲JS动态添加option和删除option的文章很多,在此推荐一篇: http://www.jb51.net/article/35205.htm 我使用的是如下方法: function remo ...
- ubuntu 服务器 php 环境简单搭建
安装中文支持,避免一些语言相关的坑 12345678 sudo apt-get install language-pack-zh-hans sudo vim /etc/default/locale L ...