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 有内容溢出,自动显示滚动条
随机推荐
- vs 扩展和更新下载的插件在什么位置呢,看看吧,哈哈
C:\Users\Administrator\AppData\Local\Microsoft\VisualStudio\10.0\Extensions,注意哈,这个AppData是隐藏的哟,要显示才能 ...
- PyToune:一款类Keras的PyTorch框架
PyToune is a Keras-like framework for PyTorch and handles much of the boilerplating code needed to t ...
- iOS-iOS 支付 [支付宝、银联、微信](转)
支付宝iOSsdk官方下载sdk地址:https://b.alipay.com/order/productDetail.htm?productId=2013080604609654&tabId ...
- Css3 权重
Css权重 权重--很多规则应用到同一个元素上时,权重是决定哪个生效的(优先级) 权重等级与权值 行内样式(1000)>ID选择器(100)>类.属性选择器或伪类选择器(10)>元素 ...
- K/3 Cloud 单据关联查询
销售出库单 下推 销售退货单,如何获知他们的关联关系?T_SAL_OUTSTOCKENTRY 是销售出库单分录T_SAL_RETURNSTOCKENTRY 是销售退货单分录T_SAL_RETURNST ...
- Nginx 开启支持谷歌Brotli压缩算法
参考链接:https://cloud.tencent.com/developer/article/1501009
- Mysql——日期函数,时间操作(汇总)
英文文档连接:https://dev.mysql.com/doc/refman/5.6/en/date-and-time-functions.html 中文文档连接:https://www.docs4 ...
- java基础知识入门
一.java简介及原理图 Java的前世今生 Java之父詹姆斯·高斯林: 1967年, 12岁用报废的电话机和电视做了一台电子游戏机; 1983年, 获得卡内基梅隆大学计算机科学博士学位; 1983 ...
- Java虚拟机内存管理小结
- RPA自定义脚本打开文件夹
import os import subprocess from rpa.web.common.utils import convert_2_unicode def startfile(filenam ...