當左右div高度不同卻有底色或背景時，通常簡單的做法就是在包含左右的div設底圖
但是，很可能您的設計這樣還不能解決您的問題時，例如可能是用百分比來區分左右顏色時
您可以考慮用這個方式，目前測試過ie7.8都沒有問題
. 紅色的部分是您css要注意設定的地方
.HTML的部分，則是在左右DIV都加入css樣式equal，
.並在左右div 內的最後一個div區塊，也增加樣式equal
以下是原始碼 demo
<!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" /> <meta http-equiv="author" content="英創達網路有限公司 Ever Creative Network Solution Corp. " /><br /> <title>div 左右等高</title> <style type="text/css"> <!-- .cont { width: 400px; margin-right: auto; margin-left: auto; overflow: hidden; } .sidebar { width: 30%; background-color: #FF0; float: left; overflow: hidden; } .main { background-color: #FC0; width: 70%; float: right; overflow: hidden; } .equal {padding-bottom: 32767px; margin-bottom: -32767px;} --> </style> </head> <body> <div class="cont"> <div class="sidebar equal"> <div class="box">區塊1</div> <div class="box equal"> <p>區塊2</p> <p>區塊2</p> <p>區塊2</p> <p>區塊2</p> <p>區塊2</p> <p>區塊2</p> </div> </div> <div class="main equal"> <div class="box">區塊1</div> <div class="box equal">區塊2</div> </div> </div> </body> </html>
此是利用正內邊距加負外邊距來實現。 padding-bottom:32767px; margin-bottom:-32767px;
這個方法的原理是事先通過正內邊距來使其擁有足夠高的佈局控件，然後通過負外邊距來使得其的位置不變。通過給父元素溢出隱藏，我們可以隱藏掉事先佔據的足夠高的空間。由兩列實際的內容高度來決定整個父元素的高度，
從而實現了等高。
進階運用 demo
如果您的設計含有底框圖片或者線條,
就必須將底線或陰影，另做在cont外
<!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" /> <meta http-equiv="author" content="英創達網路有限公司 Ever Creative Network Solution Corp. " /><br /> <title>div 左右等高</title> <style type="text/css"> <!-- /* 主體排版------------------------------------*/ .equal {padding-bottom: 32767px; margin-bottom: -32767px;} body{ background-image: url(886/bg.jpg); font-size: 12px; text-align: center; font-family: Verdana, Geneva, sans-serif; } #wrap{/*網頁外框*/ width: 925px; margin-right: auto; margin-left: auto; margin-top: 15px; text-align: left; } #header{ /*橫幅*/position: relative; } .cont{/*中區塊外框*/ overflow: hidden; clear: both; } .main_bg{ /*主區塊框*/float: right; width: 734px; } .sidebar_bg{ /*次區塊框*/ float: left; width: 181px; } #main { background-color: #FFF; background-image: url(886/main_bg1.jpg); background-repeat: repeat-x; padding-top: 15px; background-position: left 2px; padding-right: 7px; padding-left: 7px; }/*主區塊*/ #sidebar {/*次區塊*/ background-color: #efeddb; background-image: url(886/sidebar_bg.jpg); background-position: left; background-repeat: no-repeat; } #footer { text-align: center; color: #333; padding: 10px; clear: both; line-height: 1.7em; }/*頁尾*/ #footer .copyright {}/*版權聲明*/ #toplink { position: relative; } /*整體外框陰影*/ .wp_box{ } .wp_box .wp_hd{ position: relative; } .wp_box .wp_hd .wp_left{/*上框*/ font-size: 0px; background-image: url(886/wp_hd.png); background-repeat: no-repeat; margin-right: 4px; height: 4px; display: block; background-position: left bottom; } .wp_box .wp_hd .wp_left div{ /*上框右圖*/font-size: 0px; background-repeat: no-repeat; background-image: url(images/wp_hd2.png); background-position: right bottom; height: 4px; width: 4px; position: absolute; top: 0px; right: 0px; } .wp_box .wp_cd{/*中框*/overflow: hidden; background-image: url(886/wp_cd.png); background-repeat: repeat-y; background-position: left top; padding-left: 4px; } .wp_box .wp_cd .wp_right{ /*中框右圖*/background-image: url(886/wp_cd2.png); background-repeat: repeat-y; background-position: right center; padding-right: 4px; } .wp_box .wp_bd{ overflow: hidden; position: relative; } .wp_box .wp_bd .wp_left{/*下框*/ font-size: 0px; background-repeat: no-repeat; background-image: url(886/wp_bd.png); margin-right: 4px; height: 4px; } .wp_box .wp_bd .wp_left div{ /*下框右圖*/font-size: 0px; background-repeat: no-repeat; background-image: url(886/wp_bd2.png); background-position: right top; height: 4px; width: 4px; position: absolute; right: 0px; bottom: 0px; } --> </style> </head> <body> <div id="wrap"> <div class="cont"> <!--main_bg--> <div class="main_bg wp_box equal"> <div class="wp_hd"><div class="wp_left"><div></div></div></div> <div class="wp_cd equal" > <div class="wp_right equal"> <div id="main" class="equal"> <!--main--> <div class="equal"> <p>右邊 右邊右邊右邊</p> <p>右邊 右邊右邊右邊</p> <p>右邊 右邊右邊右邊</p> <p>右邊 右邊右邊右邊</p> <p>右邊 右邊右邊右邊</p> <p>右邊 右邊右邊右邊</p> <p>右邊 右邊右邊右邊</p> <p>右邊 右邊右邊右邊</p> <p>右邊 右邊右邊右邊</p> <p>右邊 右邊右邊右邊</p> <p>右邊 右邊右邊右邊</p> <p>右邊 右邊右邊右邊</p> <p>右邊 右邊右邊右邊</p> <p>右邊 右邊右邊右邊</p> <p>右邊 右邊右邊右邊</p> </div> <div class="clear"></div> <!--main edn--> </div> </div></div> </div> <!--main_bg end--> <!--sidebar_bg--> <div class="sidebar_bg wp_box equal"> <div class="wp_hd"><div class="wp_left"><div></div></div></div> <div class="wp_cd equal"><div class="wp_right equal"> <div id="sidebar" class="equal"> <!--sidebar--> <p>左邊 左邊 左邊 左邊</p> <p>左邊 左邊 左邊 左邊</p> <p>左邊 左邊 左邊 左邊</p> <p>左邊 左邊 左邊 左邊</p> <p>左邊 左邊 左邊 左邊</p> <p>左邊 左邊 左邊 左邊</p> <p>左邊 左邊 左邊 左邊</p> <!--sidebar end--> <div class="clear"></div> </div> </div></div> </div> <!--sidebar_bg end--> </div> <div class="clear"></div> <!--底部陰影--> <div class="cont"> <div class="main_bg wp_box"> <div class="wp_bd"><div class="wp_left"></div><div></div></div> </div> <div class="sidebar_bg wp_box"> <div class="wp_bd"><div class="wp_left"></div><div></div></div> </div> </div> <!--底部陰影 end--> </div> </body> </html>
