五大常用Div高度自適應(yīng)的方法

作者：admin 2010-08-24 16:03:22

本文向大家介紹一下5種常用Div高度自適應(yīng)的方法，主要包括背景圖填充，采用腳本控制列的高度，采用負(fù)的外邊界和內(nèi)補(bǔ)丁相結(jié)合，采用負(fù)的左右邊界和相對(duì)定位五種。

你對(duì)Div高度自適應(yīng)的方法是否了解，這里和大家分享一下5種常用Div高度自適應(yīng)的方法，希望對(duì)你的學(xué)習(xí)有所幫助。

5種常用Div高度自適應(yīng)的方法

1.背景圖填充

這是使用最廣泛的一種做法，無(wú)hacks，推薦使用：

SourceCodetoRun


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
<title>Equalheight(列高度相同的方法)title> 
<styletypestyletype="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-170px00;  
background:#F0F0F0;  
}  
#footer{  
clear:both;  
}  
h1,h2,address,p{  
margin:0;  
padding:.8em;  
}  
h1,h2{font-size:20px;}  
style> 
<scripttypescripttype="text/javascript"> 
// 
 
functiontoggleContent(name,n){  
vari,t='',el=document.getElementById(name);  
if(!el.origCont)el.origCont=el.innerHTML;  
 
for(i=0;i 
el.innerHTML=t;  
}  
 
//]]> 
script> 
head> 
<body> 
<dividdivid="header"> 
<h1>Headh1> 
<dividdivid="middle"> 
<dividdivid="sideright"> 
<dividdivid="sideleft"> 
<h2>sidelefth2> 
<p>默認(rèn)長(zhǎng)度加長(zhǎng)頁(yè)面p> 
<p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。  
但是如果恰當(dāng)利用，就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，  
同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
<p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
代表用戶喜歡的文字大小的相對(duì)單位。p> 
<p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，  
因?yàn)槿绻叽绮蛔儯瑒t考慮的東西就相對(duì)較少。可是如果采用彈性的設(shè)計(jì)方法，
就可以充分利用電腦的顯示器和瀏覽器。p> 
<p>也許你想你的網(wǎng)站以某種特定的方式顯示，  
但是你的用戶想看到的可能不一樣。任何強(qiáng)加于用戶的東西都不利于易用性，
從而對(duì)網(wǎng)站的成功造成損害。p> 
<p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、  
相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，  
就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
div> 
<h2>siderighth2> 
<p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、  
相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，  
就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，  
同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
<p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
代表用戶喜歡的文字大小的相對(duì)單位。p> 
<p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔儯?/SPAN>
則考慮的東西就相對(duì)較少。  
可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。p> 
<p>也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。  
任何強(qiáng)加于用戶的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。p> 
div>div> 
<dividdivid="footer"> 
Footer  
address> 
<p>制作：Yzci.Comp> 
div> 
body> 
html>

[可先修改部分代碼再運(yùn)行查看效果]#p#

2.采用腳本控制列的高度（一）

需要事先知道哪列的高度，以此為基準(zhǔn)用腳本控制。
document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"
上面的代碼是以sideright的基準(zhǔn)高度來(lái)控制sideleft的高度。

代碼簡(jiǎn)單，但比較被動(dòng)：
SourceCodetoRun


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"
content="text/html;charset=utf-8"/> 
<title>Equalheight(使用JS實(shí)現(xiàn)列高度相同的方法)title> 
<styletypestyletype="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:0auto;  
/*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> 
<dividdivid="wrap"> 
<dividdivid="header"> 
<h1>Headh1> 
div> 
<dividdivid="sideleft"> 
<h2>sidelefth2> 
<p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，
就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
<p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
代表用戶喜歡的文字大小的相對(duì)單位。p> 
<p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔儯瑒t考慮的東西就相對(duì)較少。
可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。p> 
<p>也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。
任何強(qiáng)加于用戶的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。p> 
<p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，
就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
<p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
代表用戶喜歡的文字大小的相對(duì)單位。p> 
<p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔儯瑒t考慮的東西就相對(duì)較少。
可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。p> 
<p>也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。
任何強(qiáng)加于用戶的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。p> 
div> 
<dividdivid="sideright"> 
<h2>siderighth2> 
<p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，
就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
<p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
代表用戶喜歡的文字大小的相對(duì)單位。p> 
<p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔儯瑒t考慮的東西就相對(duì)較少。
可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。p> 
<p>也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。
任何強(qiáng)加于用戶的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。p> 
div> 
<scripttypescripttype="text/javascript"> 
document.getElementById("sideleft").style.height
=document.getElementById("sideright").scrollHeight+"px"  
script> 
<dividdivid="footer"> 
Footer  
address> 
<p>制作：Yzci.Comp> 
div> 
div> 
body> 
html>

[可先修改部分代碼再運(yùn)行查看效果]#p#

3.采用腳本控制列的高度（二）

不需要事先知道哪列的高度，腳本自動(dòng)判斷。
代碼較復(fù)雜，有點(diǎn)延時(shí)：

SourceCodetoRun


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"> 
<head> 
<title>腳本控制三行三列自適應(yīng)高度DIV布局title> 
<scriptsrcscriptsrc="../js/eqCols.js"type="text/javascript">script> 
<styletypestyletype="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:0pxauto;  
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:0px5px0px;  
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:solid5px#FFFFFF;  
text-align:center;  
height:60px;  
clear:both;  
}  
style> 
head> 
<bodyonloadbodyonload="P7_equalCols('fbox','mbox','sbox')"> 
<dividdivid="header"><h3>腳本控制三行三列自適應(yīng)高度DIV布局h3>div> 
<dividdivid="mid"> 
<dividdivid="fbox"><p> 
親和力指的并不只是關(guān)于盲人和屏幕閱讀器。還有許多人雖然不是盲人，
但是有視力障礙-你我變老時(shí)就會(huì)成為他們的一員。  
使網(wǎng)站變得更具親和力的一個(gè)最簡(jiǎn)單的方法就是允許用戶改變文字大小；
拒絕提供這樣的選擇就剝奪了用戶的主導(dǎo)權(quán)，很可能使用戶無(wú)法舒適地閱讀。  
p><p> 
親和力指的并不只是關(guān)于盲人和屏幕閱讀器。還有許多人雖然不是盲人，
但是有視力障礙-你我變老時(shí)就會(huì)成為他們的一員。  
使網(wǎng)站變得更具親和力的一個(gè)最簡(jiǎn)單的方法就是允許用戶改變文字大小；
拒絕提供這樣的選擇就剝奪了用戶的主導(dǎo)權(quán)，很可能使用戶無(wú)法舒適地閱讀。  
p>div> 
<dividdivid="mbox"><p> 
親和力指的并不只是關(guān)于盲人和屏幕閱讀器。還有許多人雖然不是盲人，
但是有視力障礙-你我變老時(shí)就會(huì)成為他們的一員。  
使網(wǎng)站變得更具親和力的一個(gè)最簡(jiǎn)單的方法就是允許用戶改變文字大小；
拒絕提供這樣的選擇就剝奪了用戶的主導(dǎo)權(quán)，很可能使用戶無(wú)法舒適地閱讀。  
p> 
<p> 
如果設(shè)計(jì)者使用像素為單位指定文字大小，大多數(shù)的用戶將無(wú)法縮放文字，
因?yàn)镮nternetExplorer改變文字大小的方式與別的瀏覽器不同。  
Mozilla和Opera可以縮放已經(jīng)設(shè)定像素大小的文字，而Windows下的IE卻不能。  
p> 
<p> 
親和力指的并不只是關(guān)于盲人和屏幕閱讀器。還有許多人雖然不是盲人，
但是有視力障礙-你我變老時(shí)就會(huì)成為他們的一員。  
使網(wǎng)站變得更具親和力的一個(gè)最簡(jiǎn)單的方法就是允許用戶改變文字大小；
拒絕提供這樣的選擇就剝奪了用戶的主導(dǎo)權(quán)，很可能使用戶無(wú)法舒適地閱讀。  
p> 
<p> 
如果設(shè)計(jì)者使用像素為單位指定文字大小，大多數(shù)的用戶將無(wú)法縮放文字，
因?yàn)镮nternetExplorer改變文字大小的方式與別的瀏覽器不同。Mozilla和Opera可以縮放
已經(jīng)設(shè)定像素大小的文字，而Windows下的IE卻不能。  
p> 
div><dividdivid="sbox"><p> 
親和力指的并不只是關(guān)于盲人和屏幕閱讀器。還有許多人雖然不是盲人，
但是有視力障礙-你我變老時(shí)就會(huì)成為他們的一員。  
使網(wǎng)站變得更具親和力的一個(gè)最簡(jiǎn)單的方法就是允許用戶改變文字大小；
拒絕提供這樣的選擇就剝奪了用戶的主導(dǎo)權(quán)，很可能使用戶無(wú)法舒適地閱讀。  
p>div> 
div> 
<dividdivid="footer"><h5>制作：Yzci.Comh5>div> 
body> 
html>

[可先修改部分代碼再運(yùn)行查看效果]#p#

4.采用負(fù)的外邊界和內(nèi)補(bǔ)丁相結(jié)合

不需要事先知道哪列的高度。

hacks比較多（主要是opera的），但容易使用，推薦：

SourceCodetoRun


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
<title>Equalheight(DIV+CSS布局中自適應(yīng)高度的解決方法)title> 
<styletypestyletype="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:0auto;  
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;  
}  
/*easyclearing*/  
#wrap:after  
{  
content:'[DONOTLEAVEITISNOTREAL]';  
display:block;  
height:0;  
clear:both;  
visibility:hidden;  
}  
#wrap  
{  
display:inline-block;  
}  
/*\*/  
#wrap  
{  
display:block;  
}  
/*endeasyclearing*/  
/*\*/  
#sideleft,#sideright  
{  
padding-bottom:32767px!important;  
margin-bottom:-32767px!important;  
}  
@mediaalland(min-width:0px){  
#sideleft,#sideright  
{  
padding-bottom:0!important;  
margin-bottom:0!important;  
}  
#sideleft:before,#sideright:before  
{  
content:'[DONOTLEAVEITISNOTREAL]';  
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> 
<dividdivid="wrap"> 
<dividdivid="header"> 
<h1>Headh1> 
div> 
<dividdivid="sideleft"> 
<h2>sidelefth2> 
<p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，
就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
<p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
代表用戶喜歡的文字大小的相對(duì)單位。p> 
<p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔儯瑒t考慮的東西就相對(duì)較少。
可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。p> 
<p>也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。
任何強(qiáng)加于用戶的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。p> 
<p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，
就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
<p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
代表用戶喜歡的文字大小的相對(duì)單位。p> 
<p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔儯瑒t考慮的東西就相對(duì)較少。
可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。p> 
<p>也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。
任何強(qiáng)加于用戶的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。p> 
div> 
<dividdivid="sideright"> 
<h2>siderighth2> 
<p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，
就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
<p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
代表用戶喜歡的文字大小的相對(duì)單位。p> 
<p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔儯瑒t考慮的東西就相對(duì)較少。
可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。p> 
<p>也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。
任何強(qiáng)加于用戶的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。p> 
div> 
<dividdivid="footer"> 
Footer  
address> 
<p>制作：Yzci.Comp> 
div> 
div> 
body> 
html>

[可先修改部分代碼再運(yùn)行查看效果]#p#

5.采用負(fù)的左右邊界和相對(duì)定位

下面的例子能較好地解決列高度相同的問(wèn)題。
三行二列布局，主要內(nèi)容在左邊，網(wǎng)頁(yè)寬度750px,左列580px,右列170px。
CSS代碼：
ExampleSourceCode

#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-170px00;  
background:#F0F0F0;  
}  
 
xhtml代碼：  
ExampleSourceCode  
<dividdivid="middle"> 
<dividdivid="sideright"> 
<dividdivid="sideleft"> 
div> 
div> 
div>

從結(jié)構(gòu)看，middle（使用的是左列希望的背景色）在最外面，寬度等于sideleft的寬度，往里一層是sideright，其寬度為170px,浮動(dòng)方向是右邊。但其右面的邊界是負(fù)的170px，相當(dāng)于將sideright拉向右面（右面緊貼著middle的右邊）170px的位置。而sideleft又是套在sideright里面的，其內(nèi)容先于sideright出來(lái)，左邊界是負(fù)的580，相當(dāng)于在sideright左邊580px，此時(shí)sideleft和middle位置重合。

◆優(yōu)點(diǎn)：不需要背景圖片，無(wú)hacks，完全的自適應(yīng)高度。

◆缺點(diǎn)：現(xiàn)在的代碼只能左對(duì)齊。

文章來(lái)源:Div-Css.net設(shè)計(jì)網(wǎng)參考:http://www.div-css.net/div_css/topic/index.asp?id=7124

【編輯推薦】