北京三原色创意科技有限公司

  • 平面设计

  • 名片设计印刷

    标志

    企业画册

    折页

    海报

网站首页 >> 三原色日志 >>

CSS高度自适应,CSS背景自动延伸

« 企业网站安全CSS高度自适应,CSS背景自动延伸(2) »

2009-1-26 23:20:49

CSS高度自适应,CSS背景自动延伸

高度自适应的问题，确切的说应该是背景自适应的问题，因为许多布局中，需要将背景随着高度的自动变化而平铺，现在长江VS长征总结一下网上常见的处理方法．

大致有三种思路：
1.背景图
2.CSS控制：因为当前浏览器软件众多，版本不一（IE6,IE7,...firefox2,firefox3,opera 8...opear9）解决起来需要用很多的hack
3.JS控制：需要用户端支持javascript（现在还有不支持的吗？呵呵）．另外，就是编写者也需要注重代码的实现程度．

以下部分参考整理于如下网页来源：

天极：http://homepage.yesky.com/226/2405726.shtml

p7演示:http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm

effect.cn博客：http://www.effect.cn/_v3/post/123.html

网站：http://ajax.cnrui.cn/article/47/49/2006/20060809540.shtml

高度自适应方法一背景图：

背景图填充
这是使用最广泛的一种做法，无hacks，推荐使用．

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Equal height(列高度相同的方法)</title>  
  6. <style type="text/css">  
  7. body{  
  8.  padding: 0;  
  9.  margin: 0;  
  10.  font-size: 12px;  
  11.  font-family: Arial, Helvetica, sans-serif;  
  12.  line-height: 140%;  
  13.  background:#E7DFD3;  
  14. }  
  15. #middle{  
  16.  width: 580px;  
  17.  float:left;  
  18.  background:#FFFFFF;  
  19.  text-align:left;  
  20. }  
  21.   
  22. #header,#footer{  
  23.  background: #E8E8E8;  
  24.  width: 750px;  
  25.  text-align:center;  
  26. }  
  27. #sideleft{  
  28.  width: 580px;  
  29.  float: left;  
  30.  position:relative;  
  31.  margin-left:-580px;  
  32. }  
  33. #sideright{  
  34.  width: 170px;  
  35.  float: right;  
  36.  position:relative;  
  37.  margin: 0 -170px 0 0;  
  38.  background: #F0F0F0;  
  39. }  
  40.   
  41. #footer{  
  42.  clear:both;  
  43.    
  44. }  
  45. h1,h2,address,p{  
  46.  margin: 0;  
  47.  padding: .8em;  
  48. }  
  49. h1,h2{font-size: 20px;}  
  50.   
  51. </style>  
  52. <script type="text/javascript">  
  53. // <![CDATA[ 
  54.  
  55. function toggleContent(name,n) { 
  56.  var i,t='',el = document.getElementById(name); 
  57.  if (!el.origCont) el.origCont = el.innerHTML; 
  58.   
  59.  for (i=0;i<n;i++) t += el.origCont; 
  60.  el.innerHTML = t; 
  61.  } 
  62.  
  63. // ]]>  
  64. </script>  
  65. </head>  
  66. <body>  
  67.   
  68.   <div id="header">  
  69.     <h1>Head</h1>  
  70.   <div id="middle">  
  71.   <div id="sideright">  
  72.   <div id="sideleft">  
  73.     <h2>sideleft</h2>  
  74.  <p><a href="javascript:toggleContent('sideleft',1)">默认长度</a>& nbsp; <a href="javascript:toggleContent('sideleft',2)">加长页面</a></p& gt;  
  75.     <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>  
  76.     <p> 像素是计算机屏幕上的不可缩放的点，而一个  
  77.       h3 就是一个字大小的方块。由于字体大小的变化， h3  
  78.       代表用户喜欢的文字大小的相对单位。 </p>  
  79.     <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>  
  80.     <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>  
  81.     <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>  
  82.   </div>  
  83.    
  84.     <h2>sideright</h2>  
  85.     <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>  
  86.     <p> 像素是计算机屏幕上的不可缩放的点，而一个  
  87.       h3 就是一个字大小的方块。由于字体大小的变化， h3  
  88.       代表用户喜欢的文字大小的相对单位。 </p>  
  89.     <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>  
  90.     <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>  
  91.   </div></div>  
  92.   <div id="footer">  
  93.     <address>  
  94.       Footer  
  95.     </address>  
  96.     <p>制作：<a href="http://homepage.yesky.com">网页陶吧</a></p>  
  97.   </div>  
  98. </body>  
  99. </html>  


高度自适应方法二CSS控制：

采用负的外边界和内补丁相结合
不需要事先知道哪列的高度。
hacks比较多（主要是opera的），但容易使用，推荐：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title>  
  6. <style type="text/css">  
  7. body{  
  8.  padding: 0;  
  9.  margin: 0;  
  10.  font-size: 12px;  
  11.  font-family: Arial, Helvetica, sans-serif;  
  12.  line-height: 140%;  
  13.  text-align: center;  
  14.  background:#E7DFD3;  
  15. }  
  16. #wrap{  
  17.  width: 750px;  
  18.  margin: 0 auto;  
  19.  overflow: hidden;  
  20. }  
  21. #header{  
  22.  background: #E8E8E8;  
  23. }  
  24. #sideleft{  
  25.  width: 580px;  
  26.  float: left;  
  27.  background: #FFF;  
  28.  text-align: left;  
  29. }  
  30. #sideright{  
  31.  width: 170px;  
  32.  float: left;  
  33.  background: #F0F0F0;  
  34.  text-align: left;  
  35. }  
  36. /* easy clearing */  
  37. #wrap:after  
  38.  {  
  39.  content: '[DO NOT LEAVE IT IS NOT REAL]';  
  40.  display: block;  
  41.  height: 0;  
  42.  clear: both;  
  43.  visibility: hidden;  
  44.  }  
  45. #wrap  
  46.  {  
  47.  display: inline-block;  
  48.  }  
  49. /*\*/  
  50. #wrap  
  51.  {  
  52.  display: block;  
  53.  }  
  54. /* end easy clearing */  
  55. /*\*/  
  56. #sideleft, #sideright  
  57.  {  
  58.  padding-bottom: 32767px !important;  
  59.  margin-bottom: -32767px !important;  
  60.  }  
  61. @media all and (min-width: 0px) {  
  62. #sideleft, #sideright  
  63.  {  
  64.  padding-bottom: 0 !important;  
  65.  margin-bottom: 0 !important;  
  66.  }  
  67. #sideleft:before, #sideright:before  
  68.  {  
  69.  content: '[DO NOT LEAVE IT IS NOT REAL]';  
  70.  display: block;  
  71.  background: inherit;  
  72.  padding-top: 32767px !important;  
  73.  margin-bottom: -32767px !important;  
  74.  height: 0;  
  75.  }  
  76. }  
  77. /**/  
  78. #footer{  
  79.  background: #E8E8E8;  
  80.  width: 100%;  
  81.  float: left;  
  82. }  
  83. h1,h2,address,p{  
  84.  margin: 0;  
  85.  padding: .8em;  
  86. }  
  87. h1,h2{font-size: 20px;}  
  88. </style>  
  89. </head>  
  90. <body>  
  91. <div id="wrap">  
  92.   <div id="header">  
  93.     <h1>Head</h1>  
  94.   </div>  
  95.   <div id="sideleft">  
  96.   <h2>sideleft</h2>  
  97.     
  98.     <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>  
  99.     
  100.   </div>  
  101.   <div id="sideright">  
  102.   <h2>sideright</h2>  
  103.     <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>  
  104.     <p> 像素是计算机屏幕上的不可缩放的点，而一个  
  105.       h3 就是一个字大小的方块。由于字体大小的变化， h3  
  106.       代表用户喜欢的文字大小的相对单位。 </p>  
  107.     <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>  
  108.     <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>  
  109.   </div>  
  110.   <div id="footer">  
  111.     <address>  
  112.     Footer  
  113.     </address>  
  114.  <p>制作：<a href="http://homepage.yesky.com">网页陶吧</a></p>  
  115.   </div>  
  116. </div>  
  117. </body>  
  118. </html> 

 

随着Opera 9.0 正式版的推出，原先在 8.x版本中存在的BUG得到了彻底的解决。Equal Height Columns --DIV+CSS布局中自适应高度的解决方法一文中对8.x版本的hacks在9.0 正式版中已可以不用了，相信使用Opera的用户会经常更新升级至最新版本的。

现在的代码：

随着Opera 9.0 正式版的推出，原先在 8.x版本中存在的BUG得到了彻底的解决。Equal Height Columns --DIV+CSS布局中自适应高度的解决方法一文中对8.x版本的hacks在9.0 正式版中已可以不用了，相信使用Opera的用户会经常更新升级至最新版本的。

 

现在的代码：

 

xhtml

XML/HTML代码
  1. <div id="wrap">  
  2.   <div id="header">......</div>  
  3.   <div id="sideleft">......</div>  
  4.   <div id="sideright">......</div>  
  5.   <div id="foot">......</div>    
  6. </div> 

 

CSS

CSS代码
  1. #wrap{  
  2.     width: 750px;  
  3.     margin: 0 auto;  
  4.     overflow: hidden;  
  5. }  
  6. #header{  
  7.     background: #E8E8E8;  
  8. }  
  9. #sideleft{  
  10.     width: 580px;  
  11.     float: left;      
  12.     background: #F7F7F7;  
  13.     text-align: left;  
  14. }  
  15. #sideright{  
  16.     width: 170px;  
  17.     float: left;  
  18.     background: #F0F0F0;  
  19.     text-align: left;  
  20. }  
  21. /* easy clearing */  
  22. #wrap:after  
  23.     {  
  24.     content: '[DO NOT LEAVE IT IS NOT REAL]';  
  25.     display: block;  
  26.     height: 0;  
  27.     clear: both;  
  28.     visibility: hidden;  
  29.     }  
  30. #wrap  
  31.     {  
  32.     display: inline-block;  
  33.     }  
  34. /*\*/  
  35. #wrap  
  36.     {  
  37.     display: block;  
  38.     }  
  39. /* end easy clearing */  
  40. /*\*/  
  41. #sideleft, #sideright  
  42.     {  
  43.     padding-bottom: 32767px;  
  44.     margin-bottom: -32767px;  
  45.     }  
  46. /**/  
  47. #footer{  
  48.     background: #E8E8E8;  
  49.     width: 100%;  
  50.     float: left;  
  51. }  

 

测试环境

 

Firefox 1.5 、Opera 9.0、IE 6.0 sp2、IE 5.0

 

采用负的左右边界和相对定位
下面的例子能较好地解决列高度相同的问题。

三行二列布局，主要内容在左边，网页宽度750px,左列580px,右列170px。

  

CSS代码
  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: rightright;  
  16.  position:relative;  
  17.  margin: 0 -170px 0 0;  
  18.  background: #F0F0F0;  
  19. }  

XHML

XML/HTML代码
  1. <div id="middle">  
  2.   <div id="sideright">  
  3.     <div id="sideleft">  
  4.     </div>  
  5.   </div>  
  6. </div>  

 

从结构看，middle（使用的是左列希望的背景色）在最外面，宽度等于sideleft的宽度，往里 一层是sideright，其宽度为170px,浮动方向是右边。但其右面的边界是负的170px，相当于将sideright拉向右面（右面紧贴着 middle的右边）170px的位置。而sideleft又是套在sideright里面的，其内容先于sideright出来，左边界是负的580， 相当于在sideright左边580px，此时sideleft和middle位置重合。

优点：不需要背景图片，无hacks，完全的自适应高度。

缺点：现在的代码只能左对齐。

代码：



XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title>  
  6. <style type="text/css">  
  7. body{  
  8.  padding: 0;  
  9.  margin: 0;  
  10.  font-size: 12px;  
  11.  font-family: Arial, Helvetica, sans-serif;  
  12.  line-height: 140%;  
  13.  text-align: center;  
  14.  background:#E7DFD3;  
  15. }  
  16. #wrap{  
  17.  width: 750px;  
  18.  margin: 0 auto;  
  19.  overflow: hidden;  
  20. }  
  21. #header{  
  22.  background: #E8E8E8;  
  23. }  
  24. #sideleft{  
  25.  width: 580px;  
  26.  float: left;  
  27.  background: #FFF;  
  28.  text-align: left;  
  29. }  
  30. #sideright{  
  31.  width: 170px;  
  32.  float: left;  
  33.  background: #F0F0F0;  
  34.  text-align: left;  
  35. }  
  36. /* easy clearing */  
  37. #wrap:after  
  38.  {  
  39.  content: '[DO NOT LEAVE IT IS NOT REAL]';  
  40.  display: block;  
  41.  height: 0;  
  42.  clear: both;  
  43.  visibility: hidden;  
  44.  }  
  45. #wrap  
  46.  {  
  47.  display: inline-block;  
  48.  }  
  49. /*\*/  
  50. #wrap  
  51.  {  
  52.  display: block;  
  53.  }  
  54. /* end easy clearing */  
  55. /*\*/  
  56. #sideleft, #sideright  
  57.  {  
  58.  padding-bottom: 32767px !important;  
  59.  margin-bottom: -32767px !important;  
  60.  }  
  61. @media all and (min-width: 0px) {  
  62. #sideleft, #sideright  
  63.  {  
  64.  padding-bottom: 0 !important;  
  65.  margin-bottom: 0 !important;  
  66.  }  
  67. #sideleft:before, #sideright:before  
  68.  {  
  69.  content: '[DO NOT LEAVE IT IS NOT REAL]';  
  70.  display: block;  
  71.  background: inherit;  
  72.  padding-top: 32767px !important;  
  73.  margin-bottom: -32767px !important;  
  74.  height: 0;  
  75.  }  
  76. }  
  77. /**/  
  78. #footer{  
  79.  background: #E8E8E8;  
  80.  width: 100%;  
  81.  float: left;  
  82. }  
  83. h1,h2,address,p{  
  84.  margin: 0;  
  85.  padding: .8em;  
  86. }  
  87. h1,h2{font-size: 20px;}  
  88. </style>  
  89. </head>  
  90. <body>  
  91. <div id="wrap">  
  92.   <div id="header">  
  93.     <h1>Head</h1>  
  94.   </div>  
  95.   <div id="sideleft">  
  96.   <h2>sideleft</h2>  
  97.     <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>  
  98.     <p> 像素是计算机屏幕上的不可缩放的点，而一个  
  99.       h3 就是一个字大小的方块。由于字体大小的变化， h3  
  100.       代表用户喜欢的文字大小的相对单位。 </p>  
  101.     <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>  
  102.     <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>  
  103.     <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>  
  104.     <p> 像素是计算机屏幕上的不可缩放的点，而一个  
  105.       h3 就是一个字大小的方块。由于字体大小的变化， h3  
  106.       代表用户喜欢的文字大小的相对单位。 </p>  
  107.     <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>  
  108.     <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>  
  109.     
  110.   </div>  
  111.   <div id="sideright">  
  112.   <h2>sideright</h2>  
  113.     <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>  
  114.     <p> 像素是计算机屏幕上的不可缩放的点，而一个  
  115.       h3 就是一个字大小的方块。由于字体大小的变化， h3  
  116.       代表用户喜欢的文字大小的相对单位。 </p>  
  117.     <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>  
  118.     <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>  
  119.   </div>  
  120.   <div id="footer">  
  121.     <address>  
  122.     Footer  
  123.     </address>  
  124.  <p>制作：<a href="http://homepage.yesky.com">网页陶吧</a></p>  
  125.   </div>  
  126. </div>  
  127. </body>  
  128. </html>  

高度自适应方法三JS：

采用脚本控制列的高度（一）
需要事先知道哪列的高度，以此为基准用脚本控制。

document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"
上面的代码是以sideright的基准高度来控制sideleft的高度。

代码简单，但比较被动：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Equal height(使用JS实现列高度相同的方法)</title>  
  6. <style type="text/css">  
  7. body{  
  8.  padding: 0;  
  9.  margin: 0;  
  10.  font-size: 12px;  
  11.  font-family: Arial, Helvetica, sans-serif;  
  12.  line-height: 140%;  
  13.  text-align: center;  
  14.  background:#E7DFD3;  
  15. }  
  16. #wrap{  
  17.  width: 750px;  
  18.  margin: 0 auto;  
  19.  /*overflow: hidden;*/  
  20. }  
  21. #header{  
  22.  background: #E8E8E8;  
  23. }  
  24. #sideleft{  
  25.  width: 580px;  
  26.  float: left;  
  27.  background: #FFF;  
  28.  text-align: left;  
  29. }  
  30. #sideright{  
  31.  width: 170px;  
  32.  float: left;  
  33.  background: #F0F0F0;  
  34.  text-align: left;  
  35. }  
  36.   
  37. #footer{  
  38.  background: #E8E8E8;  
  39.  width: 100%;  
  40.  float: left;  
  41. }  
  42. h1,h2,address,p{  
  43.  margin: 0;  
  44.  padding: .8em;  
  45. }  
  46. h1,h2{font-size: 20px;}  
  47. </style>  
  48. </head>  
  49. <body>  
  50. <div id="wrap">  
  51.   <div id="header">  
  52.     <h1>Head</h1>  
  53.   </div>  
  54.   <div id="sideleft">  
  55.     <h2>sideleft</h2>  
  56.     <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>  
  57.     <p> 像素是计算机屏幕上的不可缩放的点，而一个  
  58.       h3 就是一个字大小的方块。由于字体大小的变化， h3  
  59.       代表用户喜欢的文字大小的相对单位。 </p>  
  60.     <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>  
  61.     <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>  
  62.     <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>  
  63.     <p> 像素是计算机屏幕上的不可缩放的点，而一个  
  64.       h3 就是一个字大小的方块。由于字体大小的变化， h3  
  65.       代表用户喜欢的文字大小的相对单位。 </p>  
  66.     <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>  
  67.     <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>  
  68.   </div>  
  69.   <div id="sideright">  
  70.     <h2>sideright</h2>  
  71.     <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>  
  72.     <p> 像素是计算机屏幕上的不可缩放的点，而一个  
  73.       h3 就是一个字大小的方块。由于字体大小的变化， h3  
  74.       代表用户喜欢的文字大小的相对单位。 </p>  
  75.     <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>  
  76.     <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>  
  77.   </div>  
  78.   <script type="text/javascript">  
  79. document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"  
  80. </script>  
  81.   <div id="footer">  
  82.     <address>  
  83.       Footer  
  84.     </address>  
  85.     <p>制作：<a href="http://homepage.yesky.com">网页陶吧</a></p>  
  86.   </div>  
  87. </div>  
  88. </body>  
  89. </html>  


采用脚本控制列的高度（二）
不需要事先知道哪列的高度，脚本自动判断。

代码较复杂，有点延时：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.    
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
  4. <head>  
  5.  <title>脚本控制三行三列自适应高度DIV布局</title>  
  6. <script src="../js/eqCols.js" type="text/javascript"></script>  
  7.  <style type="text/css">  
  8.  <!--  
  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.    
  17.  #header,#mid,#footer{  
  18.   width: 760px;  
  19.   margin: 0px auto;  
  20.   padding: 0px;  
  21.  }  
  22.    
  23.  #header{  
  24.   background: #F4F4F4;  
  25.   height: 60px;  
  26.   margin-bottom: 5px;  
  27.  }  
  28.    
  29.  h3,h5{  
  30.   padding-top: 25px;  
  31.   color: #708090;  
  32.   text-align: center;  
  33.   margin: 0;   
  34.  }  
  35.    
  36.  #fbox{  
  37.   background: #F1F1F1;  
  38.   width: 195px;  
  39.   float: left;  
  40.  }  
  41.    
  42.  #mbox{  
  43.   background: #DFF7FF;  
  44.   margin: 0px 5px 0px;  
  45.   padding: 0px;  
  46.   float: left;  
  47.   width: 360px;  
  48.  }  
  49.    
  50.  #sbox{  
  51.   background: #FFEBCC;  
  52.   width: 195px;  
  53.   float: right;  
  54.  }  
  55.    
  56.  p{  
  57.   margin: 0px;  
  58.   padding: 10px;  
  59.   text-indent: 2em;  
  60.   line-height: 130%;  
  61.  }  
  62.    
  63.  #footer{  
  64.   background: #CDDBED;  
  65.   border-top: solid 5px #FFFFFF;  
  66.   text-align: center;  
  67.   height: 60px;  
  68.   clear: both;  
  69.  }  
  70.  -->  
  71.  </style>  
  72. </head>  
  73.   
  74. <body onload="P7_equalCols('fbox','mbox','sbox')">  
  75. <div id="header"><h3>脚本控制三行三列自适应高度DIV布局</h3></div>  
  76. <div id="mid">  
  77. <div id="fbox"><p>  
  78. 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。  
  79. 使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。  
  80. </p><p>  
  81. 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。  
  82. 使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。  
  83. </p></div>  
  84. <div id="mbox"><p>  
  85. 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。  
  86. 使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。  
  87. </p>  
  88. <p>  
  89. 如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。  
  90. </p>  
  91. <p>  
  92. 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。  
  93. 使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。  
  94. </p>  
  95. <p>  
  96. 如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。  
  97. </p>  
  98. </div><div id="sbox"><p>  
  99. 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。  
  100. 使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。  
  101. </p></div>  
  102. </div>  
  103. <div id="footer"><h5>仅供演示<a href="http://homepage.yesky.com">网页陶吧</a></h5></div>  
  104. </body>  
  105. </html>   

 

网上常见的js控制代码如下：

JavaScript代码
  1. <script language="javascript" type="text/javascript">  
  2. var sidebar=document.getElementById("divSidebar").scrollHeight;  
  3. var main=document.getElementById("divMain").scrollHeight;  
  4. layoutHeight=Math.max(sidebar,main);  
  5. document.getElementById("divSidebar").style.height=layoutHeight+"px";  
  6. document.getElementById("divMain").style.height=layoutHeight+"px";  
  7. </script>  

 

上 面的方法可以解决高度自适应问题，但其兼容性较差，在我的站点上使用时经常会失效。（例如：页面使用了图片自动缩小效果后，由于图片加载的延迟，上面的 js往往会以大图时的div高度为准，而不是以图片缩小之后的div高度为最终适应高度。另外，本站内页侧栏内容列表的加载延迟也会引起类似问题）

关键的是，它没有解决背景图自适应的问题。

来自国外同行p7 Projectseven.com 的完美解决方案：

说它完美，是因为它有以下特点：
1、高度自适应
2、各列背景图自适应平铺
3、无论是一列、两列、还是三列。。。都可以轻松控制它们自适应（即各列等高）
4、可以动画显示高度及背景自动填充的过程。当然，你也可以关闭动画功能。
5、它提供了标签级的定义对各列高度填充的方法进行弹性控制。例如，我们可以控制补充的高度位于当前列中最后一个标签之后。

- Download the script file (p7_eqCols2_10.js)

- Place the script file in your web site folder.

- Place a link to the script file in the region of any page on which you wish to use the script:
 

<script type="text/javascript" src="p7_eqCols2_10.js"></script>


Make sure you adjust the path to reflect the actual location of the script file relative to your document.

- Place an onLoad call on your page's tag:

<body onLoad="P7_equalCols2(1,'c1','P','c2','P')">


The script arguments:

The first argument of the P7_equalCols2() function controls the animation. Set it to a value of 1 if you want the column heights animated when the page loads, set it to 0 (zero) if you do not want animation.

The next series of arguments tell the script which columns you wish to have the script act on. These are listed in pairs:

A. The id of the column element, in this case 'c1', that you wish to be part of the Equal Columns processing

B. The tag name of the element inside the column where you want the added vertical space to be inserted. This would usually be the last element in the column but it can be any of the elements inside the column. For example, specifying a 'P' tag would tell the script to look for the last tag inside the column, and then apply vertical space, as needed, just below it. This approach allows for more complex outer column structures, since the added space is actually applied inside of one of the column's elements, in effect, pushing the bottom border of the column down as needed.

Note: You must always specify the tag name in capital letters, like 'P' or 'LI' or 'H4', etc.

Column ids and tag name pairs must be enclosed in single quotes, and separated by a commas.

完整的原文见这里。

Tags: CSS  
发布:长江VS长征 | 分类:常用Html代码 | 评论:0 | 引用:0 | 浏览:
  • 相关文章:

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

日历

热门标签TagCloud

最新评论及回复

最近发表

Search

图标汇集

  • 订阅到抓虾
  • 订阅到鲜果
  • 订阅到飞鸽
  • 订阅到Google
  • 订阅到Yahoo雅虎
  • 订阅到Bloglines
  • 订阅到Gougou
  • 订阅到ROJO
  • 订阅到newsgator
  • 订阅到netvibes
  • RainbowSoft Studio Z-Blog
  • 本站支持WAP访问
  • 订阅本站的 ATOM 1.0 新闻聚合
  • 订阅本站的 RSS 2.0 新闻聚合

Powered By Z-Blog 1.8 Spirit Build 80710 Code detection by Codefense

Copyright 三原色创意 SYSCY.COM. Some Rights Reserved.