DIV嵌套时外层无法自适应高度三种解决方案
来源:互联网 发布:蛋糕店游戏不要网络的 编辑:程序博客网 时间:2024/04/28 14:09
这里向大家描述一下解决DIV嵌套时外层(父层)无法自适应高度的方法,原本自己写的CSS代码是没有错误的,但是为什么在新版的浏览器中会发现使用DIV嵌套时外层(父层)无法自适应高度的错误,这里看一下解决方案。
如何解决DIV嵌套时外层(父层)无法自适应高度?
相信很多朋友在使用CSS+DIV过程中都会遇到这个问题,特别是目前的浏览器版本越来越多,更新的也非常快,对CSS的支持和要求越来越高,如IE8、IE9、FF、chrome等等浏览器,虽然对CSS支持完美,但是也有些错误,导致DIV+CSS的排版出现验证问题。
原本自己写的CSS代码是没有错误的,但是为什么在新版的浏览器中会发现使用DIV嵌套时外层(父层)无法自适应高度的错误,完美所写的代码在IE6上能完美的展示出来,但是在IE8、FF上却出现不适应高度的问题,难道是CSS不兼容浏览器?下面就来说说其解决方法。
假如完美的CSS代码已经通过了W3C的验证,那就说明,我们写的代码完全是没有错误的,那么是说明原因呢?这个原因我也说不清楚,在网上查了好久,我也没有查到原因,但是查到了相关的解决办法,网上的解决办法有3种,但是我觉得不完美,下面列出网上的我查找到的解决方法。
1、在外层的CSS代码中加入display:table
2、第二种解决方法是定义一个CSS类:
- .box:after{
- content:".";
- display:block;
- height:0px;
- clear:both;
- visibility:hidden;
- }
然后将父层DIV代码中的<divid="main">改为<divid="main"class="box">。
3、在外层(父层)CSS代码中加入overflow:auto;
在我使用了上面3种方法后,我觉得只有第3种方法有效,但是其效果不是很好,但是不会出现异常,不过为了更完美的解决这个问题,我介绍一个很有效的方法给大家试试,这个方法绝对有效,而且也是很简单的。
最终解决方法:根据上面的3个方法,最终我的解决方法是,在外层(父层)CSS代码中加入下面两个属性值(一个都不能少)。
- clear:both;overflow:auto;
- DIV嵌套时外层无法自适应高度三种解决方案
- DIV嵌套时外层无法自适应高度三种解决方案
- IE6,IE8下DIV嵌套,外层DIV高度自适应
- IE8下DIV嵌套出现外层自适应高度
- IE8下DIV嵌套出现外层自适应高度(四种解决方法)
- 内层DIV块浮动时,外层DIV块自适应高度
- IE8下div嵌套时,外层div高度不随内层div高度改变的问题解决
- div嵌套ul时div的宽度和高度自适应
- 三种Div高度自适应的方法
- 三种Div高度自适应的方法
- 三列DIV高度自适应
- DIV嵌套过程中的高度自适应问题
- 圆,半径自适应外层高度
- 多div 高度自适应 解决方案详解
- 三种有效解决DIV高度自适应的方法
- div嵌套时margin-top出现外层偏移
- CSS hack 多DIV嵌套 自适应高度问题
- div ul li 嵌套后解决高度自适应方法
- 杭州最新公交线路一览(81-90)
- SSIS <none> text qualifier results in text file containing "_x003C_none_x003E"
- 《系统程序员成长计划》阅读笔记--温故之用
- 处理请求参数乱码问题
- 用JavaScript在框架中打开网页
- DIV嵌套时外层无法自适应高度三种解决方案
- 浅谈HTML中NAME和ID的区别
- ligerui中的tree的异步动态加载数据库例子
- javascript 全局属性和函数
- 某人的经验教训~~
- PyCon 2011 China记
- des-ecb模式
- placement new, operator new and new operator
- Window API (一)数据类型