CSS解決等寬等高問題

时间：2011-05-15 来源：Public Function Young

前段時間為了解決前端佈局問題，研究了不少，最終搞定。以下是幾種方法。
第一种（两边宽度百分比）：

View Code

<!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>
<title>三列自适应等高且中列宽度自适应</title>
<style type="text/css">
body{ background:url(http://bbs.blueidea.com/attachment.php?aid=162970&k=8a588529fdf6c7cf15d202d23dfba661&t=1304927794&noupdate=yes); }
*{ margin:0; padding:0;}
.iefix_main{float:right; font-size:0; position:relative;}
.wrapper{overflow:hidden;}
.shadow_l{width:10%;float:left; background:url(http://bbs.blueidea.com/attachment.php?aid=162380&k=983ba7d17320e4c3401cac8722cfed70&t=1304927794&noupdate=yes) repeat-y right;}
.shadow_r{width:10%;float:right; background:url(http://bbs.blueidea.com/attachment.php?aid=162381&k=02b10b1f06bcb79d22e71bf1468f79fe&t=1304927794&noupdate=yes) repeat-y left;}
.main{background:#fff; _float:left;/* ie6 hack*/  overflow:hidden;}
.autoheightfix{margin-bottom:-10000px;padding-bottom:10000px;}
</style>
</head>
<body>
<div class="wrapper">
  <div class="shadow_l autoheightfix">&nbsp;</div>
  <div class="shadow_r autoheightfix">&nbsp;</div>
  <div class="main autoheightfix">Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center0<br />
<span class="iefix_main">&nbsp;</span> <!--for ie6（当然也可for ie7)-->
</div>
</div>
</body>
</html>

第二种（中间百分比）：

View Code

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<head>
<title>三列自适应等高且中列宽度自适应</title>
<style type="text/css">
body{ background:url(http://bbs.blueidea.com/attachment.php?aid=162970&k=8a588529fdf6c7cf15d202d23dfba661&t=1304927794&noupdate=yes); }
*{ margin:0; padding:0;}
.iefix_main{float:right; font-size:0; position:relative;}
.wrapper{overflow:hidden; width:80%; margin:0 auto;}
.shadow_l{width:15px;float:left; background:url(http://bbs.blueidea.com/attachment.php?aid=162380&k=983ba7d17320e4c3401cac8722cfed70&t=1304927794&noupdate=yes) repeat-y left;}
.shadow_r{width:15px;float:right; background:url(http://bbs.blueidea.com/attachment.php?aid=162381&k=02b10b1f06bcb79d22e71bf1468f79fe&t=1304927794&noupdate=yes) repeat-y right;}
.main{background:#fff; _float:left; overflow:hidden;}
.autoheightfix{margin-bottom:-10000px;padding-bottom:10000px;}
</style>
<body>
<div class="wrapper">
  <div class="shadow_l autoheightfix">&nbsp;</div>
  <div class="shadow_r autoheightfix">&nbsp;</div>
  <div class="main autoheightfix">Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center0<br />
<span class="iefix_main">&nbsp;</span> <!--for ie6（当然也可for ie7)-->
</div>
</div>
</body>
</html>

第三種(div嵌套模式)

View Code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
body{background:url(http://bbs.blueidea.com/attachment.php?aid=162970&k=e046eec9c0fd552333d3f20aa4da545c&t=1305009100&nothumb=yes) repeat 0 0;}
.main{width:80%;margin:0 auto;*position:relative;*left:7px;}
.main .content{background:#CDFEBC;}
.main .left{background:url(http://bbs.blueidea.com/attachment.php?aid=162380&k=94f0ce1168340d77454085413483885a&t=1305009100&nothumb=yes) repeat-y 0 0;left:-7px;position:relative;width:100%;padding-left:7px;}
.main .right{background:url(http://bbs.blueidea.com/attachment.php?aid=162381&k=b6548aad1d26c1f6530cb4a2ffee23a1&t=1305009100&nothumb=yes) repeat-y 100% 0;width:100%;padding-right:7px;}
</style>
</head>
<body>
<div class="main">
    <div class="left">
        <div class="right">
            <div class="content">
                <p>主内容区域</p>
                <p>主内容区域</p>
                <p>主内容区域</p>
                <p>主内容区域</p>
                <p>主内容区域</p>
                <p>主内容区域</p>
            </div>        
        </div>
    </div>
</div>
</body>
</html>