原作者:Alex Robinson
原文標題:Equal Height Columns
這是一個比較典型的三行二列布局，每列高度（事先并不能確定哪列的高度）的相同，是每個設計師追求的目標，按一般的做法，大多采用背景圖填充、加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;
}
}
/**/ |
3.Opera9的B2在修正8的bug.
測試環境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通過。
最終效果:
以下是代碼片段： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 NOT REAL]';
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="http://www.forest53.com">forestgan</a></p>
</div>
</div>
</body>
</html> |