css 翻譯：forestgan
這是一個比較典型的三行二列布局，每列高度（事先並不能確定哪列的高度）的相同，是每個設計師追求的目標，按一般的做法，大多採用背景圖填充、加JS指令碼的方法使列的高度相同，本文要介紹的是採用容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法來解決列高度相同的問題。
先看代碼：
#wrap{
overflow: hidden;
}
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
實現原理：
塊元素必須包含在一個容器裡。
應用overflow: hidden 到容器裡的元素。
應用 padding-bottom（足夠大的值）到列的塊元素 。
應用margin-bottom（足夠大的值）到列的塊元素。
padding-bottom將列拉長變的一樣高，而負的margin-bottom又使其回到底部開始的位置，同時，溢出部分隱藏掉了。
相容各瀏覽器
IE Mac 5
得到高度正確，所以要過濾掉上面的代碼。
/*\*/
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
/**/
Opera
1. Opera7.0-7.2不能正確清除溢出部分，所以要加：
/* easy clearing */
#wrap:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap
{
display: inline-block;
}
/*\*/
#wrap
{
display: block;
}
/* end easy clearing */
/*\*/
2. Opera8處理overflow: hidden有個BUG,還得加上以下代碼：
/*\*/
#sideleft, #sideright
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#sideleft, #sideright
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#sideleft:before, #sideright:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/**/
Opera9的B2在修正8的bug.
測試環境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通過。
最終效果:
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<ahref="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"><html xmlns="<a href="http://www.w3.org/1999/xhtml"target="_blank">http://www.w3.org/1999/xhtml</a>"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Equal height(DIV+CSS布局中自適應高度的解決方案)</title><style type="text/css">body{ padding: 0; margin: 0; font-size: 12px; font-family: Arial,Helvetica, sans-serif; line-height: 140%; text-align: center;background:#E7DFD3;}#wrap{ width: 750px; margin: 0 auto; overflow: hidden;}#header{ background: #E8E8E8;}#sideleft{ width: 580px; float: left; background: #FFF; text-align:left;}#sideright{ width: 170px; float: left; background: #F0F0F0; text-align:left;}/* easy clearing */#wrap:after { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block;height: 0; clear: both; visibility: hidden; }#wrap { display: inline-block; }/*\*/#wrap { display: block; }/* end easy clearing *//*\*/#sideleft, #sideright { padding-bottom: 32767px !important;margin-bottom: -32767px !important; }@media all and (min-width: 0px) {#sideleft, #sideright { padding-bottom: 0 !important; margin-bottom: 0!important; }#sideleft:before, #sideright:before { content: '[DO NOT LEAVE IT IS NOTREAL]'; display: block; background: inherit; padding-top: 32767px!important; margin-bottom: -32767px !important; height: 0; }}/**/#footer{ background: #E8E8E8; width: 100%; float: left;}h1,h2,address,p{ margin: 0; padding: .8em;}h1,h2{font-size: 20px;}</style></head><body><div id="wrap"> <div id="header"> <h1>Head</h1></div> <div id="sideleft"> <h2>sideleft</h2><p>要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用，就可以成為增強親和力和易用性的一個自然選擇，同時又無須做出設計上的犧牲。 </p> <p> 像素是電腦螢幕上的不可縮放的點，而一個 h3就是一個字大小的方塊。由於字型大小的變化， h3 代表使用者喜歡的文字大小的相對單位。 </p> <p>採用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，則考慮的東西就相對較少。可是如果採用彈性的設計方法，就可以充分利用電腦的顯示器和瀏覽器。</p> <p>也許你想你的網站以某種特定的方式顯示，但是你的使用者想看到的可能不一樣。任何強加於使用者的東西都不利於易用性，從而對網站的成功造成損害。</p> <p>要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用，就可以成為增強親和力和易用性的一個自然選擇，同時又無須做出設計上的犧牲。 </p> <p> 像素是電腦螢幕上的不可縮放的點，而一個 h3就是一個字大小的方塊。由於字型大小的變化， h3 代表使用者喜歡的文字大小的相對單位。 </p> <p>採用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，則考慮的東西就相對較少。可是如果採用彈性的設計方法，就可以充分利用電腦的顯示器和瀏覽器。</p> <p>也許你想你的網站以某種特定的方式顯示，但是你的使用者想看到的可能不一樣。任何強加於使用者的東西都不利於易用性，從而對網站的成功造成損害。</p> </div> <div id="sideright"><h2>sideright</h2> <p>要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用，就可以成為增強親和力和易用性的一個自然選擇，同時又無須做出設計上的犧牲。 </p> <p> 像素是電腦螢幕上的不可縮放的點，而一個 h3就是一個字大小的方塊。由於字型大小的變化， h3 代表使用者喜歡的文字大小的相對單位。 </p> <p>採用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，則考慮的東西就相對較少。可是如果採用彈性的設計方法，就可以充分利用電腦的顯示器和瀏覽器。</p> <p>也許你想你的網站以某種特定的方式顯示，但是你的使用者想看到的可能不一樣。任何強加於使用者的東西都不利於易用性，從而對網站的成功造成損害。</p> </div> <div id="footer"> <address> Footer</address> <p>製作：<a href="<ahref="http://www.forest53.com"target="_blank">http://www.forest53.com</a>">forestgan</a></p></div></div></body></html>
原文：http://www.positioniseverything.net/articles/onetruelayout/equalheight
