|
|
這是使用最廣泛的一種做法，無hacks，推薦使用：
<!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(列高度相同的方法)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 140%;
background:#E7DFD3;
}
#middle{
width: 580px;
float:left;
background:#FFFFFF;
text-align:left;
}
#header,#footer{
background: #E8E8E8;
width: 750px;
text-align:center;
}
#sideleft{
width: 580px;
float: left;
position:relative;
margin-left:-580px;
}
#sideright{
width: 170px;
float: right;
position:relative;
margin: 0 -170px 0 0;
background: #F0F0F0;
}
#footer{
clear:both;
}
h1,h2,address,p{
margin: 0;
padding: .8em;
}
h1,h2{font-size: 20px;}
</style>
<script type="text/Javascript">
// <![CDATA[
function toggleContent(name,n) {
var i,t='',el = document.getElementById(name);
if (!el.origCont) el.origCont = el.innerHTML;
for (i=0;i<n;i++) t += el.origCont;
el.innerHTML = t;
}
// ]]>
</script>
</head>
<body>
<div id="header">
<h1>Head</h1>
<div id="middle">
<div id="sideright">
<div id="sideleft">
<h2>sideleft</h2>
<p><a href="Javascript:toggleContent('sideleft',1)">默認長度</a> <a href="Javascript:toggleContent('sideleft',2)">加長頁面</a></p>
<p> 要從固定的、基于像素的設計方法轉到彈性的、相對的設計方法并不容易。但是如果恰當利用，就可以成為增強親和力和易用性的一個自然選擇，同時又無須做出設計上的犧牲。 </p>
<p> 像素是計算機屏幕上的不可縮放的點，而一個
h3 就是一個字大小的方塊。由于字體大小的變化， h3
代表用戶喜歡的文字大小的相對單位。 </p>
<p> 采用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，則考慮的東西就相對較少。可是如果采用彈性的設計方法，就可以充分利用電腦的顯示器和瀏覽器。 </p>
<p> 也許你想你的網站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。任何強加于用戶的東西都不利于易用性，從而對網站的成功造成損害。 </p>
<p> 要從固定的、基于像素的設計方法轉到彈性的、相對的設計方法并不容易。但是如果恰當利用，就可以成為增強親和力和易用性的一個自然選擇，同時又無須做出設計上的犧牲。 </p>
</div>
<h2>sideright</h2>
<p> 要從固定的、基于像素的設計方法轉到彈性的、相對的設計方法并不容易。但是如果恰當利用，就可以成為增強親和力和易用性的一個自然選擇，同時又無須做出設計上的犧牲。 </p>
<p> 像素是計算機屏幕上的不可縮放的點，而一個
h3 就是一個字大小的方塊。由于字體大小的變化， h3
代表用戶喜歡的文字大小的相對單位。 </p>
<p> 采用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，則考慮的東西就相對較少。可是如果采用彈性的設計方法，就可以充分利用電腦的顯示器和瀏覽器。 </p>
<p> 也許你想你的網站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。任何強加于用戶的東西都不利于易用性，從而對網站的成功造成損害。 </p>
</div></div>
<div id="footer">
<address>
Footer
</address>
<p>制作：<a >網頁陶吧</a></p>
</div>
</body>
</html>
<script language="Javascript">
var now = new Date();
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript>
2.采用腳本控制列的高度（一）
需要事先知道哪列的高度，以此為基準用腳本控制。
document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"
上面的代碼是以sideright的基準高度來控制sideleft的高度。
代碼簡單，但比較被動：
<!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(使用JS實現列高度相同的方法)</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;
}
#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>
<script type="text/Javascript">
document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"
</script>
<div id="footer">
<address>
Footer
</address>
<p>制作：<a >網頁陶吧</a></p>
</div>
</div>
</body>
</html><script language="Javascript">
var now = new Date();
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript>
3.采用腳本控制列的高度（二）
不需要事先知道哪列的高度，腳本自動判斷。
代碼較復雜，有點延時：
<!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" xml:lang="en" lang="en">
<head>
<title>腳本控制三行三列自適應高度DIV布局</title>
<script src="../js/eqCols.js" type="text/Javascript"></script>
<style type="text/css">
<!--
body{
font-size: 75%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 100%;
margin: 5px;
padding: 0px;
}
#header,#mid,#footer{
width: 760px;
margin: 0px auto;
padding: 0px;
}
#header{
background: #F4F4F4;
height: 60px;
margin-bottom: 5px;
}
h3,h5{
padding-top: 25px;
color: #708090;
text-align: center;
margin: 0;
}
#fbox{
background: #F1F1F1;
width: 195px;
float: left;
}
#mbox{
background: #DFF7FF;
margin: 0px 5px 0px;
padding: 0px;
float: left;
width: 360px;
}
#sbox{
background: #FFEBCC;
width: 195px;
float: right;
}
p{
margin: 0px;
padding: 10px;
text-indent: 2em;
line-height: 130%;
}
#footer{
background: #CDDBED;
border-top: solid 5px #FFFFFF;
text-align: center;
height: 60px;
clear: both;
}
-->
</style>
</head>
<body onload="P7_equalCols('fbox','mbox','sbox')">
<div id="header"><h3>腳本控制三行三列自適應高度DIV布局</h3></div>
<div id="mid">
<div id="fbox"><p>
親和力指的并不只是關于盲人和屏幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時就會成為他們的一員。
使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。
</p><p>
親和力指的并不只是關于盲人和屏幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時就會成為他們的一員。
使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。
</p></div>
<div id="mbox"><p>
親和力指的并不只是關于盲人和屏幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時就會成為他們的一員。
使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。
</p>
<p>
如果設計者使用像素為單位指定文字大小，大多數的用戶將無法縮放文字，因為 InterNET Explorer 改變文字大小的方式與別的瀏覽器不同。Mozilla 和 Opera 可以縮放已經設定像素大小的文字，而Windows 下的IE卻不能。
</p>
<p>
親和力指的并不只是關于盲人和屏幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時就會成為他們的一員。
使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。
</p>
<p>
如果設計者使用像素為單位指定文字大小，大多數的用戶將無法縮放文字，因為 InterNET Explorer 改變文字大小的方式與別的瀏覽器不同。Mozilla 和 Opera 可以縮放已經設定像素大小的文字，而Windows 下的IE卻不能。
</p>
</div><div id="sbox"><p>
親和力指的并不只是關于盲人和屏幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時就會成為他們的一員。
使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。
</p></div>
</div>
<div id="footer"><h5>僅供演示<a >網頁陶吧</a></h5></div>
</body>
</html> <script language="Javascript">
var now = new Date();
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript>
4.采用負的外邊界和內補丁相結合
不需要事先知道哪列的高度。
hacks比較多（主要是opera的），但容易使用，推薦：
<!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 >網頁陶吧</a></p>
</div>
</div>
</body>
</html>
<script language="Javascript">
var now = new Date();
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript>
5.采用負的左右邊界和相對定位
下面的例子能較好地解決列高度相同的問題。
三行二列布局，主要內容在左邊，網頁寬度750px,左列580px,右列170px。
CSS代碼：
#middle{
width: 580px;
float:left;
background:#FFFFFF;
text-align:left;
}
#sideleft{
width: 580px;
float: left;
position:relative;
margin-left:-580px;
}
#sideright{
width: 170px;
float: right;
position:relative;
margin: 0 -170px 0 0;
background: #F0F0F0;
}
xhtml代碼：
<div id="middle">
<div id="sideright">
<div id="sideleft">
</div>
</div>
</div>
從結構看，middle（使用的是左列希望的背景色）在最外面，寬度等于sideleft的寬度，往里一層是sideright，其寬度為170px,浮動方向是右邊。但其右面的邊界是負的170px，相當于將sideright拉向右面（右面緊貼著middle的右邊）170px的位置。而sideleft又是套在sideright里面的，其內容先于sideright出來，左邊界是負的580，相當于在sideright左邊580px，此時sideleft和middle位置重合。
優點：不需要背景圖片，無hacks，完全的自適應高度。
缺點：現在的代碼只能左對齊。
演示：
<!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 >網頁陶吧</a></p>
</div>
</div>
</body>
</html>
<script language="Javascript">
var now = new Date();
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript>
HTML/CSS技術：解決列高度自適應(相同)的五種方法，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
