css 之内容溢出滚动,隐藏滚动条(解决火狐浏览隐藏不了滚动条问题)
解决火狐浏览隐藏不了滚动条问题
1.里层容器的width多17px,外层容器溢出隐藏,能兼容各个浏览器
.outContainer {
width:350px;
height:300px;
overflow: hidden;
}
.inContainer {
height:300px;
width: 367px;
overflow-x:hidden;
overflow-y:scroll;
}
2.设置 scrollbar-width: none,可兼容
.outContainer {
width:350px;
height:300px;
overflow: hidden;
}
.inContainer {
height:300px;
width: 350px;
overflow-x:hidden;
overflow-y:scroll;
scrollbar-width: none;
}
/* 使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器 */
.inContainer::-webkit-scrollbar{
display: none;
}
/*兼容火狐*/
.inContainer {
scrollbar-width: none;
}
/* 兼容IE10+ */
.inContainer {
-ms-overflow-style: none;
}
html如下
<body>
<div class="outContainer" >
<div class="inContainer">
<div class="inContent" ></div>
<div class="inContent inContent2"></div>
<div class="inContent" ></div>
</div>
</div>
</body>
css 之内容溢出滚动,隐藏滚动条(解决火狐浏览隐藏不了滚动条问题)的更多相关文章
- [CSS]overflow内容溢出
定义和用法 overflow 属性规定当内容溢出元素框时发生的事情. 说明 这个属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制.因此,有 ...
- jqprint导入jqgrid表格时,内容溢出的原因以及解决方法
jqprint在导入表格的时候,会将原表格的样式全部拉过来,所以说原表格(如jqgrid的表格)的内容在有滚动条的时候,必须得将宽度设置为100%(等百分比的宽度),不能设置成固定宽度,不然表格内容会 ...
- CSS应用内容补充及小实例
一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...
- 解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标题和内容单元格无法对齐的问题
问题:boostrap-table有水平和垂直滚动条时,滚动条不高的时候(滚动高度比较大的时候没有问题),滚动条滑到最右边表格标题和内容单元格无法对齐的问题 问题原因:bootstrap-table源 ...
- css设置滚动条并显示或隐藏
看效果,没有滚动条,超出div,开发中肯定不行. 有滚动条 最后就是想隐藏滚动条 代码 有滚动条并显示 <!DOCTYPE html> <html lang="en&quo ...
- CSS:overflow 内容溢出属性
overflow 属性规定当内容溢出元素框时发生的事情 值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容 ...
- 滚动条ScrollViewer防止滚动时按内容跳跃式滚动的设置
原文:滚动条ScrollViewer防止滚动时按内容跳跃式滚动的设置 属性中将CanContentScroll设置为False,滚动时就不会跳了,会连续的滚动
- CSS基础 overflow 内容溢出部分显示效果
属性:overflow 值 作用 visible 默认,内容溢出部分可见 hidden 内容溢出部分不可见 scroll 内容有无溢出,都有滚动条 auto 有内容溢出,自动显示滚动条
随机推荐
- 【ARTS】01_28_左耳听风-201900520~201900526
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- MapReduce程序的开发过程
1. 在linux(虚拟机环境)下安装hadoop2.8.3 1.1 安装JDK环境 1.2 安装hadoop 1.3 进行配置:core-site.xml,hdfs-site.xml设置 1.4 初 ...
- Java异步调用转同步的5种方式
1.异步和同步的概念 同步调用:调用方在调用过程中,持续等待返回结果. 异步调用:调用方在调用过程中,不直接等待返回结果,而是执行其他任务,结果返回形式通常为回调函数. 2 .异步转为同步的概率 需要 ...
- python logging模块【转载】
转自:https://www.cnblogs.com/dahu-daqing/p/7040764.html 参考:老顽童log模块,讲的很细致,基本上拿到手就可以直接用了,很赞 1 logging模块 ...
- 【VS开发】MP4与H.264
一.MP4格式基本概念 MP4格式对应标准MPEG-4标准(ISO/IEC14496) 二.MP4封装格式核心概念 1 MP4封装格式对应标准为 ISO/IEC 14496-12(信息技术 视听对象 ...
- Optional的理解和使用
1.Optional 到底是什么? Optional 是一个包装类.类中包装的对象可以为 NULL 或非 NULL.简单说就是把 NULL 包了一层,防止直接对 NULL 操作报NPE. 2.Opti ...
- java 访问数据库公共类
package com.javaweb.mvc; import java.sql.*; /** * @author 公共数据访问类 * * Statement 和 PreparedStatement之 ...
- Python时间日期格式化之time与datetime模块
1 引言 在实际开发过程中,我们经常会用到日期或者时间,那么在Python中我们怎么获取时间,以及如何将时间转换为我们需要的格式呢?在之前的开发中,也曾遇到time.datetime等模块下的不同函数 ...
- [转帖]被HTTP/2漏洞拖累,所有Kubernetes版本受影响
被HTTP/2漏洞拖累,所有Kubernetes版本受影响 https://www.kubernetes.org.cn/5746.html 服务很重要啊... 低版本都不解决安全问题了.. 不过HTT ...
- mysql在字符编辑窗口下怎么退出编辑界面?(mysql下的ctrl+c与\c)
[1]SQL编辑 我们在SQL编辑的时候打错了,想要退出编辑重新输入,或者是不想写了. 如下图 (1)如果我们直接按ctrl+c中断,那么直接退出整个linux了,如上图 (2)我们可以使用\c,直接 ...