DIV+CSS实现三列自适应高度
作者：佳明妈 来源：懒人建站 2009-12-28 人气： 提示：此代码有一个缺憾，在IE7下 只有中间这一列的内容层高度大于其他两列才能完美自适应高度。 当然，这点问题并不影响他的完美。灵活使用，或者给IE7指定高度，即可。你能解决这个问题，望不吝赐教。
在IE6/IE8/火狐 下面都非常的完美。
查看演示 http://www.51xuediannao.com/uploads/jiqiao/zishiying/zishiying.htm
纯DIV+CSS实现。
结构代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+CSS实现三列自适应高度 - 懒人建站 - http://www.51xuediannao.com</title>
<style type="text/css">
/*以下为必须样式*/
.box{overflow:hidden;}
.left{width:250px;float:left; background:#FC9;}
.right{width:250px;float:right;background:#FC9;}
.center{ background:#FC0;_float:left;/* ie6的hack*/ overflow:hidden;}
.Column{margin-bottom:-10000px;padding-bottom:10000px;}
/*必须样式结束*/
/*以下为装饰内容的样式*/
a{ color:#30C;}
dl,dt,dd{
margin:0px;
padding:0px;
font-size:10pt;
line-height:150%;}
</style>
</head>
<body>
<div class="box">
<div class="left Column"></div>
<!--下面是右列--->
<div class="right Column"></div>
<!--下面是中间列------------------------------>
<div class="center Column">
<!--下面是兼容IE6必须-->
<span style="float:right; position:relative;"> </span> <!--IE6必须-->
</div>
</div>
</body>
</html>
DIV+CSS实现三列自适应高度由懒人建站收集整理，您可以自由传播，请主动带上本文链接
懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
DIV+CSS实现三列自适应高度-最新评论