若父设置了overflow: hidden;子如何不受影响
若父设置了overflow: hidden;子如何不受影响
1.如图：
2.只需要给一个position: absolute;定位
3.相当于重新给页面进行定位，右侧便会有滚动条出现。
4.overflow属性：
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
若父设置了overflow: hidden;子如何不受影响的更多相关文章
- IE6,IE7上设置body{overflow:hidden;}失效Bug
IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...
- IE下设置body{overflow:hidden;}失效Bug
问题重现: <p>There are no scrollbars on this page in sane browsers</p> html, body, p { margi ...
- 在ie7中overflow:hidden失效问题及解决方案
css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...
- [css]当父元素的margin-top碰上子元素的margin-top
出现条件:父元素和子元素都设置了margin-top 现象:子元素的margin-top可能会失效,导致父元素和子元素粘连在一起 解决方法: 1.给父元素加padding-top:1px. 2.给父元 ...
- CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？
如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...
- css ie7中overflow:hidden失效问题及解决方法
css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...
- border-radius导致overflow:hidden失效问题。
如果一个父元素设置了overflow:hidden属于的同时还设置了border-radius属性,那么如果想隐藏超出的子元素,四个圆角处会出现超出圆角依然显示的bug: 一种方法是运用-webkit ...
- overflow: hidden用法，不仅仅是隐藏溢出
overflow:hidden是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. <!DOCTYPE html> <html ...
- IE6 Bug overflow:hidden失效
下面就是我所收集或遇到的IE6 Bug之一:overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidd ...
随机推荐
- 使用DIV弹出框的代码示例，备忘。
1.思路 使用DIV模拟弹出框,一共用三个div: divWindow: 原来的界面内容区域 divLogin:要弹出的内容区域 divBackground:给弹出内容区域做个遮罩的区域. 点击 “请 ...
- s:iterator 标签使用错误记录
<s:iterator value="newMarriageMoveList" id='tpNewMarriage' status="number"> ...
- 5 Protocols For Event-Driven API Architectures
The internet is a system of communication, and as such, the relationship between client and server, ...
- 升级python（linux）
查看系统当前python版本 2: [root@wangyuelou ~]# python Python 2.4.3 (#1, May 5 2011, 16:39:10) [GCC ...
- MySql事务select for update及数据的一致性处理讲解
MySQL中的事务,默认是自动提交的,即autocommit = 1: 但是这样的话,在某些情形中就会出现问题:比如: 如果你想一次性插入了1000条数据,mysql会commit1000次的, 如果 ...
- linux每日命令(36)：wc命令
Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 一．命令格式 wc [-clw][--help][--version][文件... ...
- 小patch（psu）的打法 -- 实例
从patch中的readme来. bug:10214450 测试数据: SQL> create table t (t timestamp); Table created. SQL ...
- 【iCore4 双核心板_ARM】例程六：IWDG看门狗实验——复位ARM
实验原理: STM32内部包含独立看门狗,通过看门狗可以监控程序远行,程序运行错误时, 未在规定时间内喂狗,自动复位ARM.本实验通过按键按下,停止喂狗,制造程序运行 错误,从而产生复位. 核心代码: ...
- Java编程的逻辑 (81) - 并发同步协作工具
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...
- android平台的三个编译命令——make,mm,mmm
在Android源码根目录下,执行以下三步即可编译android: 1. build/envsetup.sh #这个脚本用来设置android的编译环境; 2. lunch #选择编译目标 3 ...