相信很多人都非常喜歡用div+css布局,無論你是前端開發(fā)者，還是后臺程序員，因為它的好處實在太多，可以用很少的代碼來控制布局，然后用CSS表現(xiàn)其形態(tài)，表現(xiàn)和樣式分離。而且在SEO方面，它還能提供30%的優(yōu)化，我們何樂而不為呢。
很多人都會碰到如題的布局問題，解決方案很多，可以用背景圖來填充，或用js來控制，但終不是最佳方案，最好還是從DIV,CSS本身來考慮:
以下為三行兩列的的經(jīng)典模式，還可以演變成多種布局，有待大家修改:
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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>兩列高度自適應(yīng)</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
#top{background:#dcdcdc;height:30px;}
#main{overflow:hidden;}
.sidebar{float:left;width:150px;background:#ff0000;}
.content{background:#333333;overflow:hidden;_float:left;/*兼容IE6*/}
.row{margin-bottom:-10000px;padding-bottom:10000px;/*內(nèi)外補丁是關(guān)鍵*/}
#footer{clear:both;height:30px;background:#0000ff;}
-->
</style>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="main">
<div class="sidebar row">
我在左邊<br />
我在左邊<br />
我在左邊<br />
我在左邊<br />
我在左邊<br />
我在左邊<br />
我在左邊<br />
我在左邊<br />
我在左邊<br />
我在左邊<br />
我在左邊<br />
我在左邊<br />
我在左邊<br />
我在左邊<br />
我在左邊<br />
我在左邊<br />
我在左邊<br />
</div>
<div class="content row">
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
<span style="float:right; font-size:0; position:relative; "> </span> <!--為了萬惡的ie6-->
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
配上效果圖：
本方案在IE6，IE7，IE8，F(xiàn)F下均測試通過，雖然簡單，但是用處廣泛，希望對廣大web標準愛好者有所幫助
Tag標簽: DIV+CSS,高度自適應(yīng)
