人人摸人人爱人人操,亚州欧美中文日韩

主頁 > 知識(shí)庫 > 解決列高度自適應(yīng)(相同)的五種方法

解決列高度自適應(yīng)(相同)的五種方法

1.背景圖填充

這是使用最廣泛的一種做法，無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;in;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)">默認(rèn)長度/a>nbsp;nbsp;a href="javascript:toggleContent('sideleft',2)">加長頁面/a>/p>
    p> 要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無須做出設(shè)計(jì)上的犧牲。 /p>
    p> 像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)
      h3 就是一個(gè)字大小的方塊。由于字體大小的變化， h3
      代表用戶喜歡的文字大小的相對(duì)單位。 /p>
    p> 采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔?，則考慮的東西就相對(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í)又無須做出設(shè)計(jì)上的犧牲。 /p>
  /div>
    h2>sideright/h2>
    p> 要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無須做出設(shè)計(jì)上的犧牲。 /p>
    p> 像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)
      h3 就是一個(gè)字大小的方塊。由于字體大小的變化， h3
      代表用戶喜歡的文字大小的相對(duì)單位。 /p>
    p> 采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔?，則考慮的東西就相對(duì)較少?？墒侨绻捎脧椥缘脑O(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。 /p>
    p> 也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。任何強(qiáng)加于用戶的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。 /p>
  /div>/div>
  div id="footer">
    address>
      Footer
    /address>
    p>制作：a >網(wǎng)頁陶吧/a>/p>
  /div>
/body>
/html>
script language="Javascript">
var now = new Date();
document.write("img src='http://counter.yesky.com/counter.shtml?CID=54197AID=-1refer="+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=54197AID=-1refer=noscriptcountercur=noscriptcounter" border='0' width='0' height='0'/>
/noscript>

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

需要事先知道哪列的高度，以此為基準(zhǔn)用腳本控制。

document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"

上面的代碼是以sideright的基準(zhǔn)高度來控制sideleft的高度。

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

!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實(shí)現(xiàn)列高度相同的方法)/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> 要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無須做出設(shè)計(jì)上的犧牲。 /p>
    p> 像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)
      h3 就是一個(gè)字大小的方塊。由于字體大小的變化， h3
      代表用戶喜歡的文字大小的相對(duì)單位。 /p>
    p> 采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔儯瑒t考慮的東西就相對(duì)較少?？墒侨绻捎脧椥缘脑O(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í)又無須做出設(shè)計(jì)上的犧牲。 /p>
    p> 像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)
      h3 就是一個(gè)字大小的方塊。由于字體大小的變化， h3
      代表用戶喜歡的文字大小的相對(duì)單位。 /p>
    p> 采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔?，則考慮的東西就相對(duì)較少?？墒侨绻捎脧椥缘脑O(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。 /p>
    p> 也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。任何強(qiáng)加于用戶的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。 /p>
  /div>
  div id="sideright">
    h2>sideright/h2>
    p> 要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無須做出設(shè)計(jì)上的犧牲。 /p>
    p> 像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)
      h3 就是一個(gè)字大小的方塊。由于字體大小的變化， h3
      代表用戶喜歡的文字大小的相對(duì)單位。 /p>
    p> 采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔?，則考慮的東西就相對(duì)較少?？墒侨绻捎脧椥缘脑O(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。 /p>
    p> 也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。任何強(qiáng)加于用戶的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。 /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 >網(wǎng)頁陶吧/a>/p>
  /div>
/div>
/body>
/html>script language="Javascript">
var now = new Date();
document.write("img src='http://counter.yesky.com/counter.shtml?CID=54197AID=-1refer="+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=54197AID=-1refer=noscriptcountercur=noscriptcounter" border='0' width='0' height='0'/>
/noscript>

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

不需要事先知道哪列的高度，腳本自動(dòng)判斷。

代碼較復(fù)雜，有點(diǎn)延時(shí)：

!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>腳本控制三行三列自適應(yīng)高度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>腳本控制三行三列自適應(yīng)高度DIV布局/h3>/div>
div id="mid">
div id="fbox">p>
親和力指的并不只是關(guān)于盲人和屏幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時(shí)就會(huì)成為他們的一員。
使網(wǎng)站變得更具親和力的一個(gè)最簡單的方法就是允許用戶改變文字大?。痪芙^提供這樣的選擇就剝奪了用戶的主導(dǎo)權(quán)，很可能使用戶無法舒適地閱讀。
/p>p>
親和力指的并不只是關(guān)于盲人和屏幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時(shí)就會(huì)成為他們的一員。
使網(wǎng)站變得更具親和力的一個(gè)最簡單的方法就是允許用戶改變文字大??；拒絕提供這樣的選擇就剝奪了用戶的主導(dǎo)權(quán)，很可能使用戶無法舒適地閱讀。
/p>/div>
div id="mbox">p>
親和力指的并不只是關(guān)于盲人和屏幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時(shí)就會(huì)成為他們的一員。
使網(wǎng)站變得更具親和力的一個(gè)最簡單的方法就是允許用戶改變文字大??；拒絕提供這樣的選擇就剝奪了用戶的主導(dǎo)權(quán)，很可能使用戶無法舒適地閱讀。
/p>
p>
如果設(shè)計(jì)者使用像素為單位指定文字大小，大多數(shù)的用戶將無法縮放文字，因?yàn)?nbsp;Internet Explorer 改變文字大小的方式與別的瀏覽器不同。Mozilla 和 Opera 可以縮放已經(jīng)設(shè)定像素大小的文字，而Windows 下的IE卻不能。
/p>
p>
親和力指的并不只是關(guān)于盲人和屏幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時(shí)就會(huì)成為他們的一員。
使網(wǎng)站變得更具親和力的一個(gè)最簡單的方法就是允許用戶改變文字大??；拒絕提供這樣的選擇就剝奪了用戶的主導(dǎo)權(quán)，很可能使用戶無法舒適地閱讀。
/p>
p>
如果設(shè)計(jì)者使用像素為單位指定文字大小，大多數(shù)的用戶將無法縮放文字，因?yàn)?nbsp;Internet Explorer 改變文字大小的方式與別的瀏覽器不同。Mozilla 和 Opera 可以縮放已經(jīng)設(shè)定像素大小的文字，而Windows 下的IE卻不能。
/p>
/div>div id="sbox">p>
親和力指的并不只是關(guān)于盲人和屏幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時(shí)就會(huì)成為他們的一員。
使網(wǎng)站變得更具親和力的一個(gè)最簡單的方法就是允許用戶改變文字大小；拒絕提供這樣的選擇就剝奪了用戶的主導(dǎo)權(quán)，很可能使用戶無法舒適地閱讀。
/p>/div>
/div>
div id="footer">h5>僅供演示a >網(wǎng)頁陶吧/a>/h5>/div>
/body>
/html> script language="Javascript">
var now = new Date();
document.write("img src='http://counter.yesky.com/counter.shtml?CID=54197AID=-1refer="+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=54197AID=-1refer=noscriptcountercur=noscriptcounter" border='0' width='0' height='0'/>
/noscript>

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

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

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布局中自適應(yīng)高度的解決方法)/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> 要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無須做出設(shè)計(jì)上的犧牲。 /p>
    p> 像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)
      h3 就是一個(gè)字大小的方塊。由于字體大小的變化， h3
      代表用戶喜歡的文字大小的相對(duì)單位。 /p>
    p> 采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔?，則考慮的東西就相對(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í)又無須做出設(shè)計(jì)上的犧牲。 /p>
    p> 像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)
      h3 就是一個(gè)字大小的方塊。由于字體大小的變化， h3
      代表用戶喜歡的文字大小的相對(duì)單位。 /p>
    p> 采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔?，則考慮的東西就相對(duì)較少?？墒侨绻捎脧椥缘脑O(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。 /p>
    p> 也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。任何強(qiáng)加于用戶的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。 /p>
  /div>
  div id="sideright">
  h2>sideright/h2>
    p> 要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無須做出設(shè)計(jì)上的犧牲。 /p>
    p> 像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)
      h3 就是一個(gè)字大小的方塊。由于字體大小的變化， h3
      代表用戶喜歡的文字大小的相對(duì)單位。 /p>
    p> 采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔?，則考慮的東西就相對(duì)較少。可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。 /p>
    p> 也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。任何強(qiáng)加于用戶的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。 /p>
  /div>
  div id="footer">
    address>
    Footer
    /address>
p>制作：a >網(wǎng)頁陶吧/a>/p>
  /div>
/div>
/body>
/html>
script language="Javascript">
var now = new Date();
document.write("img src='http://counter.yesky.com/counter.shtml?CID=54197AID=-1refer="+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=54197AID=-1refer=noscriptcountercur=noscriptcounter" border='0' width='0' height='0'/>
/noscript>

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

下面的例子能較好地解決列高度相同的問題。

三行二列布局，主要內(nèi)容在左邊，網(wǎng)頁寬度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>

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

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

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

演示：

!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布局中自適應(yīng)高度的解決方法)/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> 要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無須做出設(shè)計(jì)上的犧牲。 /p>
    p> 像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)
      h3 就是一個(gè)字大小的方塊。由于字體大小的變化， h3
      代表用戶喜歡的文字大小的相對(duì)單位。 /p>
    p> 采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔儯瑒t考慮的東西就相對(duì)較少?？墒侨绻捎脧椥缘脑O(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í)又無須做出設(shè)計(jì)上的犧牲。 /p>
    p> 像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)
      h3 就是一個(gè)字大小的方塊。由于字體大小的變化， h3
      代表用戶喜歡的文字大小的相對(duì)單位。 /p>
    p> 采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔?，則考慮的東西就相對(duì)較少。可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。 /p>
    p> 也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。任何強(qiáng)加于用戶的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。 /p>

  /div>
  div id="sideright">
  h2>sideright/h2>
    p> 要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無須做出設(shè)計(jì)上的犧牲。 /p>
    p> 像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)
      h3 就是一個(gè)字大小的方塊。由于字體大小的變化， h3
      代表用戶喜歡的文字大小的相對(duì)單位。 /p>
    p> 采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔儯瑒t考慮的東西就相對(duì)較少?？墒侨绻捎脧椥缘脑O(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。 /p>
    p> 也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。任何強(qiáng)加于用戶的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。 /p>
  /div>
  div id="footer">
    address>
    Footer
    /address>
p>制作：a >網(wǎng)頁陶吧/a>/p>
  /div>
/div>
/body>
/html>
script language="Javascript">
var now = new Date();
document.write("img src='http://counter.yesky.com/counter.shtml?CID=54197AID=-1refer="+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=54197AID=-1refer=noscriptcountercur=noscriptcounter" border='0' width='0' height='0'/>
/noscript>

標(biāo)簽：邯鄲東莞喀什南充陽泉遼源海東濱州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《解決列高度自適應(yīng)(相同)的五種方法》，本文關(guān)鍵詞解決,列,高度,自,適應(yīng),相同,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。