DIV嵌套时外层无法自适应高度三种解决方案

http://developer.51cto.com/art/201009/225428.htm

这里向大家描述一下解决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类:

  1. .box:after{  
  2. content:".";  
  3. display:block;  
  4. height:0px;  
  5. clear:both;  
  6. visibility:hidden;  
  7. }  
  8.  

然后将父层DIV代码中的<divid="main">改为<divid="main"class="box">。

3、在外层(父层)CSS代码中加入overflow:auto;

在我使用了上面3种方法后,我觉得只有第3种方法有效,但是其效果不是很好,但是不会出现异常,不过为了更完美的解决这个问题,我介绍一个很有效的方法给大家试试,这个方法绝对有效,而且也是很简单的。

最终解决方法:根据上面的3个方法,最终我的解决方法是,在外层(父层)CSS代码中加入下面两个属性值(一个都不能少)。 

  1. clear:both;overflow:auto;  
  2.  
展开阅读全文

jQuery控制的嵌套DIV为何外层老是显示在内层,求教

05-16

html:rn[code=HTML]rndiv id="sidebar">rn 全部 市中区rn rnrn 城区rnrn 苏稽镇rnrn 全福镇rnrn 通江镇rnrn 土主镇rnrn 牟子镇rnrn 棉竹镇rnrnrnrn 峨眉山rn rnrn 绥山镇(城区)rnrn 景区rnrnrnrn[/code]rnCSS:rn[code=CSS]rn*margin:0;padding:0;rn#sidebarwidth:180px;height:auto;margin:0px;padding:0px;font-size:12px;rn#sidebar h3padding-left:5px;rn.sidelistposition:relative ;z-index:1;height:32px;width:60px; float:left; rn.sidelist span h3position:relative ;z-index:1;height:32px;line-height:32px;width:60px;font-size:14px;font-weight:normal;overflow:hidden;clear:bothrn.sidelist span h3 afont-size:12px;text-decoration:none;display:block;width:auto;height:auto;color:#000;rn.sidelist span h3 a:hovercolor:red;font-weight:bold;clear:both;rn.i-listdisplay:none;position:absolute; z-index:2;left:60px;top:-20px;width:180px;height:150px;padding:15px;background:#fff;border:1px solid #c30;overflow:hidden; clear:bothrn.i-list ul liwidth:60px;float:left;list-style:none;line-height:32px;heignt:32px;rn.i-list ul li acolor:#000;text-decoration:none;font-size:12px;rn.i-list ul li a:hovertext-decoration:underline;color:red;rn.hoverborder:1px solid #c30;border-right:0;width:80px;background:#fff9ef;rn[/code]rnJQUREY:rn[code=JScript]rn$(document).ready(function()rn $('.sidelist').mousemove(function()rn $(this).find('.i-list').show();rn $(this).find('h3').addClass('hover');rn );rn $('.sidelist').mouseleave(function()rn $(this).find('.i-list').hide();rn $(this).find('h3').removeClass('hover');rn );rn);rn[/code]rn[color=#FF0000]rn[b]问题:为什么导致外层的内容显示到内层啊?比如:当滑过市中区,弹出框理应只显示下面的镇,为什么里面还出现了峨眉山,有什么办法可以使内层遮挡外层啊,我使用过z-index:2;也不行,请教各位大侠,谢谢!rn[/b][/color]rnrnrn 论坛

div里层与外层div的空隙问题!!!

01-17

这是母版页重的布局代码:rn rnrn     rn   rn rn   rn     rn 网站导航rn   rn  rn  rn   rn     rn rn 侧边栏rn      rn    rn     rn rn 主体内容rn rn    rn  rn  rn   rn  rn   rn   Copyright ©2007 - 2008 Sky Online Exam. All rights reserved. 天空在线考试版权所有rn  rn  rnrnrn这是css代码:rnbody rnrn background-color:#F3F2F0;rn margin:0;rn padding:0;rnrn#container rnrn width:100%;rn background-color:#F3F2F0;rn margin:0;rn border:0;rn padding:0;rnrn#Header rnrn width:100%;rn height:100px;rn float:left;rn margin:0;rn border:0;rn padding:0; rnrn#Header #bannerrnrn width:100%;rn height:85px;rn margin:0;rn border:0;rn padding:0;rn background:#FFFFFF;rnrn#Header #menurnrn width:100%;rn height:15px;rn margin:0;rn border:0;rn padding:0;rn background:#2596E4;rnrn#PageBody rnrn width:100%;rn height:800px;rn float:left; rn margin:0;rn border:0;rn padding:0;rnrn#PageBody #Sidebarrnrn width:20%;rn height:600px;rn float:left;rn margin:0;rn border:0;rn padding:0;rnrn#PageBody #MainBodyrnrn width:78%; rn height:100%;rn float:right;rn background:#FFFFFF;rn margin:0;rn border:0;rn padding:0;rnrn.clearfloat rn clear:both;rn height:0;rn font-size: 1px;rn line-height: 0px;rnrn#Footer rnrn width:100%;rn height:60px;rn float:left;rn margin:0;rn border:0;rn padding:0; rn background:#2596E4;rnrnrn.clearfloat rn clear:both;rn height:0;rn font-size: 1px;rn line-height: 0px;rnrnrn/*页面底部*/rn#Footer rnrn width:100%;rn height:60px;rn float:left;rn margin:0;rn border:0;rn padding:0; rn background:#2596E4;rnrnrnrncontainer与Header ,Header 与banner, banner与 menu 之间的上下都存在缝隙,好像空了一行,难看死了。怎么才能消除啊,rnrn弄了好久没想明白为什么??本人刚学CSS布局,希望大家帮帮我rnrnrnrn 论坛

没有更多推荐了,返回首页