自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

作者：admin
開(kāi)發(fā) 前端
本文向大家介紹一下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

  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
  7. <title>Equalheight(列高度相同的方法)title> 
  8. <styletypestyletype="text/css"> 
  9. body{  
  10. padding:0;  
  11. margin:0;  
  12. font-size:12px;  
  13. font-family:Arial,Helvetica,sans-serif;  
  14. line-height:140%;  
  15. background:#E7DFD3;  
  16. }  
  17. #middle{  
  18. width:580px;  
  19. float:left;  
  20. background:#FFFFFF;  
  21. text-align:left;  
  22. }  
  23. #header,#footer{  
  24. background:#E8E8E8;  
  25. width:750px;  
  26. text-align:center;  
  27. }  
  28. #sideleft{  
  29. width:580px;  
  30. float:left;  
  31. position:relative;  
  32. margin-left:-580px;  
  33. }  
  34. #sideright{  
  35. width:170px;  
  36. float:right;  
  37. position:relative;  
  38. margin:0-170px00;  
  39. background:#F0F0F0;  
  40. }  
  41. #footer{  
  42. clear:both;  
  43. }  
  44. h1,h2,address,p{  
  45. margin:0;  
  46. padding:.8em;  
  47. }  
  48. h1,h2{font-size:20px;}  
  49. style> 
  50. <scripttypescripttype="text/javascript"> 
  51. // 
  52.  
  53. functiontoggleContent(name,n){  
  54. vari,t='',el=document.getElementById(name);  
  55. if(!el.origCont)el.origCont=el.innerHTML;  
  56.  
  57. for(i=0;i 
  58. el.innerHTML=t;  
  59. }  
  60.  
  61. //]]> 
  62. script> 
  63. head> 
  64. <body> 
  65. <dividdivid="header"> 
  66. <h1>Headh1> 
  67. <dividdivid="middle"> 
  68. <dividdivid="sideright"> 
  69. <dividdivid="sideleft"> 
  70. <h2>sidelefth2> 
  71. <p>默認(rèn)長(zhǎng)度加長(zhǎng)頁(yè)面p> 
  72. <p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。  
  73. 但是如果恰當(dāng)利用，就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，  
  74. 同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
  75. <p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
  76. h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
  77. 代表用戶(hù)喜歡的文字大小的相對(duì)單位。p> 
  78. <p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，  
  79. 因?yàn)槿绻叽绮蛔?，則考慮的東西就相對(duì)較少。可是如果采用彈性的設(shè)計(jì)方法，
  80. 就可以充分利用電腦的顯示器和瀏覽器。p> 
  81. <p>也許你想你的網(wǎng)站以某種特定的方式顯示，  
  82. 但是你的用戶(hù)想看到的可能不一樣。任何強(qiáng)加于用戶(hù)的東西都不利于易用性，
  83. 從而對(duì)網(wǎng)站的成功造成損害。p> 
  84. <p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、  
  85. 相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，  
  86. 就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
  87. div> 
  88. <h2>siderighth2> 
  89. <p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、  
  90. 相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，  
  91. 就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，  
  92. 同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
  93. <p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
  94. h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
  95. 代表用戶(hù)喜歡的文字大小的相對(duì)單位。p> 
  96. <p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔儯?/SPAN>
  97. 則考慮的東西就相對(duì)較少。  
  98. 可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。p> 
  99. <p>也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶(hù)想看到的可能不一樣。  
  100. 任何強(qiáng)加于用戶(hù)的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。p> 
  101. div>div> 
  102. <dividdivid="footer"> 
  103. Footer  
  104. address> 
  105. <p>制作：Yzci.Comp> 
  106. div> 
  107. body> 
  108. html> 
  109.  

 [可先修改部分代碼再運(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 

  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"
  7. content="text/html;charset=utf-8"/> 
  8. <title>Equalheight(使用JS實(shí)現(xiàn)列高度相同的方法)title> 
  9. <styletypestyletype="text/css"> 
  10. body{  
  11. padding:0;  
  12. margin:0;  
  13. font-size:12px;  
  14. font-family:Arial,Helvetica,sans-serif;  
  15. line-height:140%;  
  16. text-align:center;  
  17. background:#E7DFD3;  
  18. }  
  19. #wrap{  
  20. width:750px;  
  21. margin:0auto;  
  22. /*overflow:hidden;*/  
  23. }  
  24. #header{  
  25. background:#E8E8E8;  
  26. }  
  27. #sideleft{  
  28. width:580px;  
  29. float:left;  
  30. background:#FFF;  
  31. text-align:left;  
  32. }  
  33. #sideright{  
  34. width:170px;  
  35. float:left;  
  36. background:#F0F0F0;  
  37. text-align:left;  
  38. }  
  39. #footer{  
  40. background:#E8E8E8;  
  41. width:100%;  
  42. float:left;  
  43. }  
  44. h1,h2,address,p{  
  45. margin:0;  
  46. padding:.8em;  
  47. }  
  48. h1,h2{font-size:20px;}  
  49. style> 
  50. head> 
  51. <body> 
  52. <dividdivid="wrap"> 
  53. <dividdivid="header"> 
  54. <h1>Headh1> 
  55. div> 
  56. <dividdivid="sideleft"> 
  57. <h2>sidelefth2> 
  58. <p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，
  59. 就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
  60. <p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
  61. h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
  62. 代表用戶(hù)喜歡的文字大小的相對(duì)單位。p> 
  63. <p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔?，則考慮的東西就相對(duì)較少。
  64. 可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。p> 
  65. <p>也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶(hù)想看到的可能不一樣。
  66. 任何強(qiáng)加于用戶(hù)的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。p> 
  67. <p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，
  68. 就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
  69. <p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
  70. h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
  71. 代表用戶(hù)喜歡的文字大小的相對(duì)單位。p> 
  72. <p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔儯瑒t考慮的東西就相對(duì)較少。
  73. 可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。p> 
  74. <p>也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶(hù)想看到的可能不一樣。
  75. 任何強(qiáng)加于用戶(hù)的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。p> 
  76. div> 
  77. <dividdivid="sideright"> 
  78. <h2>siderighth2> 
  79. <p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，
  80. 就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
  81. <p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
  82. h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
  83. 代表用戶(hù)喜歡的文字大小的相對(duì)單位。p> 
  84. <p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔?，則考慮的東西就相對(duì)較少。
  85. 可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。p> 
  86. <p>也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶(hù)想看到的可能不一樣。
  87. 任何強(qiáng)加于用戶(hù)的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。p> 
  88. div> 
  89. <scripttypescripttype="text/javascript"> 
  90. document.getElementById("sideleft").style.height
  91. =document.getElementById("sideright").scrollHeight+"px"  
  92. script> 
  93. <dividdivid="footer"> 
  94. Footer  
  95. address> 
  96. <p>制作：Yzci.Comp> 
  97. div> 
  98. div> 
  99. body> 
  100. html> 
  101.  

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

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

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

SourceCodetoRun 

  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"> 
  5. <head> 
  6. <title>腳本控制三行三列自適應(yīng)高度DIV布局title> 
  7. <scriptsrcscriptsrc="../js/eqCols.js"type="text/javascript">script> 
  8. <styletypestyletype="text/css"> 
  9. body{  
  10. font-size:75%;  
  11. font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;  
  12. line-height:100%;  
  13. margin:5px;  
  14. padding:0px;  
  15. }  
  16. #header,#mid,#footer{  
  17. width:760px;  
  18. margin:0pxauto;  
  19. padding:0px;  
  20. }  
  21. #header{  
  22. background:#F4F4F4;  
  23. height:60px;  
  24. margin-bottom:5px;  
  25. }  
  26. h3,h5{  
  27. padding-top:25px;  
  28. color:#708090;  
  29. text-align:center;  
  30. margin:0;  
  31. }  
  32. #fbox{  
  33. background:#F1F1F1;  
  34. width:195px;  
  35. float:left;  
  36. }  
  37. #mbox{  
  38. background:#DFF7FF;  
  39. margin:0px5px0px;  
  40. padding:0px;  
  41. float:left;  
  42. width:360px;  
  43. }  
  44. #sbox{  
  45. background:#FFEBCC;  
  46. width:195px;  
  47. float:right;  
  48. }  
  49. p{  
  50. margin:0px;  
  51. padding:10px;  
  52. text-indent:2em;  
  53. line-height:130%;  
  54. }  
  55. #footer{  
  56. background:#CDDBED;  
  57. border-top:solid5px#FFFFFF;  
  58. text-align:center;  
  59. height:60px;  
  60. clear:both;  
  61. }  
  62. style> 
  63. head> 
  64. <bodyonloadbodyonload="P7_equalCols('fbox','mbox','sbox')"> 
  65. <dividdivid="header"><h3>腳本控制三行三列自適應(yīng)高度DIV布局h3>div> 
  66. <dividdivid="mid"> 
  67. <dividdivid="fbox"><p> 
  68. 親和力指的并不只是關(guān)于盲人和屏幕閱讀器。還有許多人雖然不是盲人，
  69. 但是有視力障礙-你我變老時(shí)就會(huì)成為他們的一員。  
  70. 使網(wǎng)站變得更具親和力的一個(gè)最簡(jiǎn)單的方法就是允許用戶(hù)改變文字大??；
  71. 拒絕提供這樣的選擇就剝奪了用戶(hù)的主導(dǎo)權(quán)，很可能使用戶(hù)無(wú)法舒適地閱讀。  
  72. p><p> 
  73. 親和力指的并不只是關(guān)于盲人和屏幕閱讀器。還有許多人雖然不是盲人，
  74. 但是有視力障礙-你我變老時(shí)就會(huì)成為他們的一員。  
  75. 使網(wǎng)站變得更具親和力的一個(gè)最簡(jiǎn)單的方法就是允許用戶(hù)改變文字大??；
  76. 拒絕提供這樣的選擇就剝奪了用戶(hù)的主導(dǎo)權(quán)，很可能使用戶(hù)無(wú)法舒適地閱讀。  
  77. p>div> 
  78. <dividdivid="mbox"><p> 
  79. 親和力指的并不只是關(guān)于盲人和屏幕閱讀器。還有許多人雖然不是盲人，
  80. 但是有視力障礙-你我變老時(shí)就會(huì)成為他們的一員。  
  81. 使網(wǎng)站變得更具親和力的一個(gè)最簡(jiǎn)單的方法就是允許用戶(hù)改變文字大小；
  82. 拒絕提供這樣的選擇就剝奪了用戶(hù)的主導(dǎo)權(quán)，很可能使用戶(hù)無(wú)法舒適地閱讀。  
  83. p> 
  84. <p> 
  85. 如果設(shè)計(jì)者使用像素為單位指定文字大小，大多數(shù)的用戶(hù)將無(wú)法縮放文字，
  86. 因?yàn)镮nternetExplorer改變文字大小的方式與別的瀏覽器不同。  
  87. Mozilla和Opera可以縮放已經(jīng)設(shè)定像素大小的文字，而Windows下的IE卻不能。  
  88. p> 
  89. <p> 
  90. 親和力指的并不只是關(guān)于盲人和屏幕閱讀器。還有許多人雖然不是盲人，
  91. 但是有視力障礙-你我變老時(shí)就會(huì)成為他們的一員。  
  92. 使網(wǎng)站變得更具親和力的一個(gè)最簡(jiǎn)單的方法就是允許用戶(hù)改變文字大小；
  93. 拒絕提供這樣的選擇就剝奪了用戶(hù)的主導(dǎo)權(quán)，很可能使用戶(hù)無(wú)法舒適地閱讀。  
  94. p> 
  95. <p> 
  96. 如果設(shè)計(jì)者使用像素為單位指定文字大小，大多數(shù)的用戶(hù)將無(wú)法縮放文字，
  97. 因?yàn)镮nternetExplorer改變文字大小的方式與別的瀏覽器不同。Mozilla和Opera可以縮放
  98. 已經(jīng)設(shè)定像素大小的文字，而Windows下的IE卻不能。  
  99. p> 
  100. div><dividdivid="sbox"><p> 
  101. 親和力指的并不只是關(guān)于盲人和屏幕閱讀器。還有許多人雖然不是盲人，
  102. 但是有視力障礙-你我變老時(shí)就會(huì)成為他們的一員。  
  103. 使網(wǎng)站變得更具親和力的一個(gè)最簡(jiǎn)單的方法就是允許用戶(hù)改變文字大??；
  104. 拒絕提供這樣的選擇就剝奪了用戶(hù)的主導(dǎo)權(quán)，很可能使用戶(hù)無(wú)法舒適地閱讀。  
  105. p>div> 
  106. div> 
  107. <dividdivid="footer"><h5>制作：Yzci.Comh5>div> 
  108. body> 
  109. html> 
  110.  

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

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

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

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

SourceCodetoRun 

  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
  7. <title>Equalheight(DIV+CSS布局中自適應(yīng)高度的解決方法)title> 
  8. <styletypestyletype="text/css"> 
  9. body{  
  10. padding:0;  
  11. margin:0;  
  12. font-size:12px;  
  13. font-family:Arial,Helvetica,sans-serif;  
  14. line-height:140%;  
  15. text-align:center;  
  16. background:#E7DFD3;  
  17. }  
  18. #wrap{  
  19. width:750px;  
  20. margin:0auto;  
  21. overflow:hidden;  
  22. }  
  23. #header{  
  24. background:#E8E8E8;  
  25. }  
  26. #sideleft{  
  27. width:580px;  
  28. float:left;  
  29. background:#FFF;  
  30. text-align:left;  
  31. }  
  32. #sideright{  
  33. width:170px;  
  34. float:left;  
  35. background:#F0F0F0;  
  36. text-align:left;  
  37. }  
  38. /*easyclearing*/  
  39. #wrap:after  
  40. {  
  41. content:'[DONOTLEAVEITISNOTREAL]';  
  42. display:block;  
  43. height:0;  
  44. clear:both;  
  45. visibility:hidden;  
  46. }  
  47. #wrap  
  48. {  
  49. display:inline-block;  
  50. }  
  51. /*\*/  
  52. #wrap  
  53. {  
  54. display:block;  
  55. }  
  56. /*endeasyclearing*/  
  57. /*\*/  
  58. #sideleft,#sideright  
  59. {  
  60. padding-bottom:32767px!important;  
  61. margin-bottom:-32767px!important;  
  62. }  
  63. @mediaalland(min-width:0px){  
  64. #sideleft,#sideright  
  65. {  
  66. padding-bottom:0!important;  
  67. margin-bottom:0!important;  
  68. }  
  69. #sideleft:before,#sideright:before  
  70. {  
  71. content:'[DONOTLEAVEITISNOTREAL]';  
  72. display:block;  
  73. background:inherit;  
  74. padding-top:32767px!important;  
  75. margin-bottom:-32767px!important;  
  76. height:0;  
  77. }  
  78. }  
  79. /**/  
  80. #footer{  
  81. background:#E8E8E8;  
  82. width:100%;  
  83. float:left;  
  84. }  
  85. h1,h2,address,p{  
  86. margin:0;  
  87. padding:.8em;  
  88. }  
  89. h1,h2{font-size:20px;}  
  90. style> 
  91. head> 
  92. <body> 
  93. <dividdivid="wrap"> 
  94. <dividdivid="header"> 
  95. <h1>Headh1> 
  96. div> 
  97. <dividdivid="sideleft"> 
  98. <h2>sidelefth2> 
  99. <p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，
  100. 就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
  101. <p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
  102. h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
  103. 代表用戶(hù)喜歡的文字大小的相對(duì)單位。p> 
  104. <p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔?，則考慮的東西就相對(duì)較少。
  105. 可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。p> 
  106. <p>也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶(hù)想看到的可能不一樣。
  107. 任何強(qiáng)加于用戶(hù)的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。p> 
  108. <p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，
  109. 就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
  110. <p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
  111. h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
  112. 代表用戶(hù)喜歡的文字大小的相對(duì)單位。p> 
  113. <p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔?，則考慮的東西就相對(duì)較少。
  114. 可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。p> 
  115. <p>也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶(hù)想看到的可能不一樣。
  116. 任何強(qiáng)加于用戶(hù)的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。p> 
  117. div> 
  118. <dividdivid="sideright"> 
  119. <h2>siderighth2> 
  120. <p>要從固定的、基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的、相對(duì)的設(shè)計(jì)方法并不容易。但是如果恰當(dāng)利用，
  121. 就可以成為增強(qiáng)親和力和易用性的一個(gè)自然選擇，同時(shí)又無(wú)須做出設(shè)計(jì)上的犧牲。p> 
  122. <p>像素是計(jì)算機(jī)屏幕上的不可縮放的點(diǎn)，而一個(gè)  
  123. h3就是一個(gè)字大小的方塊。由于字體大小的變化，h3  
  124. 代表用戶(hù)喜歡的文字大小的相對(duì)單位。p> 
  125. <p>采用印刷式的固定設(shè)計(jì)方案或許要容易些，因?yàn)槿绻叽绮蛔?，則考慮的東西就相對(duì)較少。
  126. 可是如果采用彈性的設(shè)計(jì)方法，就可以充分利用電腦的顯示器和瀏覽器。p> 
  127. <p>也許你想你的網(wǎng)站以某種特定的方式顯示，但是你的用戶(hù)想看到的可能不一樣。
  128. 任何強(qiáng)加于用戶(hù)的東西都不利于易用性，從而對(duì)網(wǎng)站的成功造成損害。p> 
  129. div> 
  130. <dividdivid="footer"> 
  131. Footer  
  132. address> 
  133. <p>制作：Yzci.Comp> 
  134. div> 
  135. div> 
  136. body> 
  137. html> 
  138.  

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

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

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

  1. #middle{  
  2. width:580px;  
  3. float:left;  
  4. background:#FFFFFF;  
  5. text-align:left;  
  6. }  
  7. #sideleft{  
  8. width:580px;  
  9. float:left;  
  10. position:relative;  
  11. margin-left:-580px;  
  12. }  
  13. #sideright{  
  14. width:170px;  
  15. float:right;  
  16. position:relative;  
  17. margin:0-170px00;  
  18. background:#F0F0F0;  
  19. }  
  20.  
  21. xhtml代碼：  
  22. ExampleSourceCode  
  23. <dividdivid="middle"> 
  24. <dividdivid="sideright"> 
  25. <dividdivid="sideleft"> 
  26. div> 
  27. div> 
  28. div> 
  29.  

 從結(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

【編輯推薦】

  1. DIV CSS網(wǎng)頁(yè)布局開(kāi)發(fā)參考規(guī)范
  2. IE6.0對(duì)padding的解讀分析
  3. DIV+CSS網(wǎng)頁(yè)錯(cuò)位診斷和解決方法
  4. Float構(gòu)建三欄DIV CSS網(wǎng)頁(yè)布局
  5. 技術(shù)分享 如何使用CSS控制超鏈接文字樣式
責(zé)任編輯：佚名 來(lái)源： div-css.net
Div高度
相關(guān)推薦

2010-08-30 09:52:03

DIV高度自適應(yīng)

2010-08-25 13:10:43

div高度CSS

2010-08-30 10:26:20

DIV自適應(yīng)高度

2010-08-30 09:15:15

DIV高度自適應(yīng)

2010-08-30 09:22:13

DIV高度自適應(yīng)

2010-08-26 14:18:25

DIV高度

2009-07-06 13:18:35

Servlet方法

2023-11-28 11:22:51

Pythonitertools庫(kù)工具

2010-08-26 16:27:46

CSS高度

2010-08-27 17:41:03

DIV+CSS

2010-08-30 14:57:21

DIV+CSS

2010-08-24 13:01:13

DIV+CSS

2010-09-09 16:43:35

DIV+CSS

2021-01-13 15:13:07

Python開(kāi)發(fā) 工具

2019-06-04 10:40:07

2010-09-10 12:59:33

DIV嵌套CSS

2010-08-30 14:47:47

CSS選擇器

2010-09-08 16:09:52

DIV+CSS

2013-05-07 09:24:53

BYOD

2011-05-16 10:30:02

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)