您好,欢迎访问成都祈钰瑶科技有限公司!

全国咨询热线

18982081108
✕

成都网站建设公司,成都网站UI设计,成都网站安全维护,成都网站内容优化服务

五大常用Div高度自适应的方法

你对Div高度自适应的方法是否了解,这里和大家分享一下5种常用Div高度自适应的方法,希望对你的学习有所帮助。

成都创新互联公司专注于沅陵网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供沅陵营销型网站建设,沅陵网站制作、沅陵网页设计、沅陵网站官网定制、重庆小程序开发公司服务,打造沅陵网络公司原创品牌,更为您提供沅陵网站排名全网营销落地服务。

5种常用Div高度自适应的方法

1.背景图填充

这是使用最广泛的一种做法,无hacks,推荐使用:

SourceCodetoRun

 
 
  1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>Equalheight(列高度相同的方法) title>
  6. <styletypestyletype="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. #header,#footer{
  22. background:#E8E8E8;
  23. width:750px;
  24. text-align:center;
  25. }
  26. #sideleft{
  27. width:580px;
  28. float:left;
  29. position:relative;
  30. margin-left:-580px;
  31. }
  32. #sideright{
  33. width:170px;
  34. float:right;
  35. position:relative;
  36. margin:0-170px00;
  37. background:#F0F0F0;
  38. }
  39. #footer{
  40. clear:both;
  41. }
  42. h1,h2,address,p{
  43. margin:0;
  44. padding:.8em;
  45. }
  46. h1,h2{font-size:20px;}
  47. style>
  48. <scripttypescripttype="text/javascript">
  49. // </span>&nbsp;<LI><SPAN>&nbsp;</SPAN><LI class=alt><SPAN><SPAN class=cdata>functiontoggleContent(name,n){ </SPAN>&nbsp;</SPAN><LI><SPAN><SPAN class=cdata>vari,t='',el=document.getElementById(name); </SPAN>&nbsp;</SPAN><LI class=alt><SPAN><SPAN class=cdata>if(!el.origCont)el.origCont=el.innerHTML; </SPAN>&nbsp;</SPAN><LI><SPAN>&nbsp;</SPAN><LI class=alt><SPAN><SPAN class=cdata>for(i=0;i<N;I++)T+=EL.ORIGCONT; span <>&nbsp;</SPAN><LI><SPAN><SPAN class=cdata>el.innerHTML=t; </SPAN>&nbsp;</SPAN><LI class=alt><SPAN><SPAN class=cdata>} </SPAN>&nbsp;</SPAN><LI><SPAN>&nbsp;</SPAN><LI class=alt><SPAN><SPAN class=cdata>//]]&gt;</SPAN><SPAN>&nbsp;</SPAN></SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>script</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>head</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>body</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"header"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>h1</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>Head</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h1</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"middle"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideright"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideleft"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>sideleft</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>默认长度加长页面</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。 &nbsp;</SPAN><LI class=alt><SPAN>但是如果恰当利用,就可以成为增强亲和力和易用性的一个自然选择, &nbsp;</SPAN><LI><SPAN>同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>像素是计算机屏幕上的不可缩放的点,而一个 &nbsp;</SPAN><LI><SPAN>h3就是一个字大小的方块。由于字体大小的变化,h3 &nbsp;</SPAN><LI class=alt><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>采用印刷式的固定设计方案或许要容易些, &nbsp;</SPAN><LI class=alt><SPAN>因为如果尺寸不变,则考虑的东西就相对较少。可是如果采用弹性的设计方法,</SPAN><LI class=alt><SPAN>就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>也许你想你的网站以某种特定的方式显示, &nbsp;</SPAN><LI class=alt><SPAN>但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性,</SPAN><LI class=alt><SPAN>从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、 &nbsp;</SPAN><LI class=alt><SPAN>相对的设计方法并不容易。但是如果恰当利用, &nbsp;</SPAN><LI><SPAN>就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>sideright</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、 &nbsp;</SPAN><LI><SPAN>相对的设计方法并不容易。但是如果恰当利用, &nbsp;</SPAN><LI class=alt><SPAN>就可以成为增强亲和力和易用性的一个自然选择, &nbsp;</SPAN><LI><SPAN>同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>像素是计算机屏幕上的不可缩放的点,而一个 &nbsp;</SPAN><LI><SPAN>h3就是一个字大小的方块。由于字体大小的变化,h3 &nbsp;</SPAN><LI class=alt><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>采用印刷式的固定设计方案或许要容易些,因为如果尺寸不变,</SPAN><LI><SPAN>则考虑的东西就相对较少。 &nbsp;</SPAN><LI class=alt><SPAN>可是如果采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。 &nbsp;</SPAN><LI class=alt><SPAN>任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"footer"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN>Footer &nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>address</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>制作:Yzci.Com</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>body</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>html</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN>&nbsp;</SPAN></LI></OL></PRE> <P>&nbsp;[可先修改部分代码再运行查看效果]#p#</P> <P><STRONG>2.采用脚本控制列的高度(一)</STRONG></P> <P>需要事先知道哪列的高度,以此为基准用脚本控制。<BR>document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"<BR>上面的代码是以sideright的基准高度来控制sideleft的高度。</P> <P>代码简单,但比较被动:<BR>SourceCodetoRun&nbsp;</P><PRE><OL class=dp-xml><LI class=alt><SPAN><SPAN></SPAN><LI><SPAN>&nbsp;</SPAN><LI class=alt><SPAN>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>htmlxmlns</SPAN><SPAN class=tag-name>htmlxmlns</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"http://www.w3.org/1999/xhtml"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>head</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>metahttp-equiv</SPAN><SPAN class=tag-name>metahttp-equiv</SPAN><SPAN>="Content-Type"</SPAN><LI><SPAN class=attribute-value>content</SPAN><SPAN>="text/html;</SPAN><SPAN class=attribute>charset</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>utf</SPAN><SPAN>-8"</SPAN><SPAN class=tag>/&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>title</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>Equalheight(使用JS实现列高度相同的方法)</SPAN><SPAN class=tag></< span><SPAN class=tag-name>title</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>styletype</SPAN><SPAN class=tag-name>styletype</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"text/css"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN>body{ &nbsp;</SPAN><LI><SPAN>padding:0; &nbsp;</SPAN><LI class=alt><SPAN>margin:0; &nbsp;</SPAN><LI><SPAN>font-size:12px; &nbsp;</SPAN><LI class=alt><SPAN>font-family:Arial,Helvetica,sans-serif; &nbsp;</SPAN><LI><SPAN>line-height:140%; &nbsp;</SPAN><LI class=alt><SPAN>text-align:center; &nbsp;</SPAN><LI><SPAN>background:#E7DFD3; &nbsp;</SPAN><LI class=alt><SPAN>} &nbsp;</SPAN><LI><SPAN>#wrap{ &nbsp;</SPAN><LI class=alt><SPAN>width:750px; &nbsp;</SPAN><LI><SPAN>margin:0auto; &nbsp;</SPAN><LI class=alt><SPAN>/*overflow:hidden;*/ &nbsp;</SPAN><LI><SPAN>} &nbsp;</SPAN><LI class=alt><SPAN>#header{ &nbsp;</SPAN><LI><SPAN>background:#E8E8E8; &nbsp;</SPAN><LI class=alt><SPAN>} &nbsp;</SPAN><LI><SPAN>#sideleft{ &nbsp;</SPAN><LI class=alt><SPAN>width:580px; &nbsp;</SPAN><LI><SPAN>float:left; &nbsp;</SPAN><LI class=alt><SPAN>background:#FFF; &nbsp;</SPAN><LI><SPAN>text-align:left; &nbsp;</SPAN><LI class=alt><SPAN>} &nbsp;</SPAN><LI><SPAN>#sideright{ &nbsp;</SPAN><LI class=alt><SPAN>width:170px; &nbsp;</SPAN><LI><SPAN>float:left; &nbsp;</SPAN><LI class=alt><SPAN>background:#F0F0F0; &nbsp;</SPAN><LI><SPAN>text-align:left; &nbsp;</SPAN><LI class=alt><SPAN>} &nbsp;</SPAN><LI><SPAN>#footer{ &nbsp;</SPAN><LI class=alt><SPAN>background:#E8E8E8; &nbsp;</SPAN><LI><SPAN>width:100%; &nbsp;</SPAN><LI class=alt><SPAN>float:left; &nbsp;</SPAN><LI><SPAN>} &nbsp;</SPAN><LI class=alt><SPAN>h1,h2,address,p{ &nbsp;</SPAN><LI><SPAN>margin:0; &nbsp;</SPAN><LI class=alt><SPAN>padding:.8em; &nbsp;</SPAN><LI><SPAN>} &nbsp;</SPAN><LI class=alt><SPAN>h1,h2{font-size:20px;} &nbsp;</SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>style</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>head</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>body</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"wrap"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"header"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>h1</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>Head</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h1</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideleft"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>sideleft</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用,</SPAN><LI class=alt><SPAN>就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>像素是计算机屏幕上的不可缩放的点,而一个 &nbsp;</SPAN><LI class=alt><SPAN>h3就是一个字大小的方块。由于字体大小的变化,h3 &nbsp;</SPAN><LI><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>采用印刷式的固定设计方案或许要容易些,因为如果尺寸不变,则考虑的东西就相对较少。</SPAN><LI class=alt><SPAN>可是如果采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。</SPAN><LI><SPAN>任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用,</SPAN><LI class=alt><SPAN>就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>像素是计算机屏幕上的不可缩放的点,而一个 &nbsp;</SPAN><LI class=alt><SPAN>h3就是一个字大小的方块。由于字体大小的变化,h3 &nbsp;</SPAN><LI><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>采用印刷式的固定设计方案或许要容易些,因为如果尺寸不变,则考虑的东西就相对较少。</SPAN><LI class=alt><SPAN>可是如果采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。</SPAN><LI><SPAN>任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideright"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>sideright</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用,</SPAN><LI><SPAN>就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>像素是计算机屏幕上的不可缩放的点,而一个 &nbsp;</SPAN><LI><SPAN>h3就是一个字大小的方块。由于字体大小的变化,h3 &nbsp;</SPAN><LI class=alt><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>采用印刷式的固定设计方案或许要容易些,因为如果尺寸不变,则考虑的东西就相对较少。</SPAN><LI><SPAN>可是如果采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。</SPAN><LI class=alt><SPAN>任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>scripttype</SPAN><SPAN class=tag-name>scripttype</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"text/javascript"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN>document.getElementById("sideleft")</SPAN><SPAN class=attribute>.style.height</SPAN><LI><SPAN>=</SPAN><SPAN class=attribute-value>document</SPAN><SPAN>.getElementById("sideright").scrollHeight+"px" &nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>script</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"footer"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN>Footer &nbsp;</SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>address</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>制作:Yzci.Com</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>body</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>html</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN>&nbsp;</SPAN></LI></OL></PRE> <P>&nbsp;[可先修改部分代码再运行查看效果]#p#</P> <P><STRONG>3.采用脚本控制列的高度(二)</STRONG></P> <P>不需要事先知道哪列的高度,脚本自动判断。<BR>代码较复杂,有点延时:</P> <P>SourceCodetoRun&nbsp;</P><PRE><OL class=dp-xml><LI class=alt><SPAN><SPAN></SPAN><LI><SPAN>&nbsp;</SPAN><LI class=alt><SPAN>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>htmlxmlns</SPAN><SPAN class=tag-name>htmlxmlns</SPAN><SPAN>="http://www.w3.org/1999/xhtml"xml</SPAN><SPAN class=attribute>:lang</SPAN><SPAN>="en"lang="en"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>head</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>title</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>脚本控制三行三列自适应高度DIV布局</SPAN><SPAN class=tag></< span><SPAN class=tag-name>title</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>scriptsrc</SPAN><SPAN class=tag-name>scriptsrc</SPAN><SPAN>="../js/eqCols.js"</SPAN><SPAN class=attribute-value>type</SPAN><SPAN>="text/javascript"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN class=tag></< span><SPAN class=tag-name>script</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>styletype</SPAN><SPAN class=tag-name>styletype</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"text/css"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN>body{ &nbsp;</SPAN><LI><SPAN>font-size:75%; &nbsp;</SPAN><LI class=alt><SPAN>font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; &nbsp;</SPAN><LI><SPAN>line-height:100%; &nbsp;</SPAN><LI class=alt><SPAN>margin:5px; &nbsp;</SPAN><LI><SPAN>padding:0px; &nbsp;</SPAN><LI class=alt><SPAN>} &nbsp;</SPAN><LI><SPAN>#header,#mid,#footer{ &nbsp;</SPAN><LI class=alt><SPAN>width:760px; &nbsp;</SPAN><LI><SPAN>margin:0pxauto; &nbsp;</SPAN><LI class=alt><SPAN>padding:0px; &nbsp;</SPAN><LI><SPAN>} &nbsp;</SPAN><LI class=alt><SPAN>#header{ &nbsp;</SPAN><LI><SPAN>background:#F4F4F4; &nbsp;</SPAN><LI class=alt><SPAN>height:60px; &nbsp;</SPAN><LI><SPAN>margin-bottom:5px; &nbsp;</SPAN><LI class=alt><SPAN>} &nbsp;</SPAN><LI><SPAN>h3,h5{ &nbsp;</SPAN><LI class=alt><SPAN>padding-top:25px; &nbsp;</SPAN><LI><SPAN>color:#708090; &nbsp;</SPAN><LI class=alt><SPAN>text-align:center; &nbsp;</SPAN><LI><SPAN>margin:0; &nbsp;</SPAN><LI class=alt><SPAN>} &nbsp;</SPAN><LI><SPAN>#fbox{ &nbsp;</SPAN><LI class=alt><SPAN>background:#F1F1F1; &nbsp;</SPAN><LI><SPAN>width:195px; &nbsp;</SPAN><LI class=alt><SPAN>float:left; &nbsp;</SPAN><LI><SPAN>} &nbsp;</SPAN><LI class=alt><SPAN>#mbox{ &nbsp;</SPAN><LI><SPAN>background:#DFF7FF; &nbsp;</SPAN><LI class=alt><SPAN>margin:0px5px0px; &nbsp;</SPAN><LI><SPAN>padding:0px; &nbsp;</SPAN><LI class=alt><SPAN>float:left; &nbsp;</SPAN><LI><SPAN>width:360px; &nbsp;</SPAN><LI class=alt><SPAN>} &nbsp;</SPAN><LI><SPAN>#sbox{ &nbsp;</SPAN><LI class=alt><SPAN>background:#FFEBCC; &nbsp;</SPAN><LI><SPAN>width:195px; &nbsp;</SPAN><LI class=alt><SPAN>float:right; &nbsp;</SPAN><LI><SPAN>} &nbsp;</SPAN><LI class=alt><SPAN>p{ &nbsp;</SPAN><LI><SPAN>margin:0px; &nbsp;</SPAN><LI class=alt><SPAN>padding:10px; &nbsp;</SPAN><LI><SPAN>text-indent:2em; &nbsp;</SPAN><LI class=alt><SPAN>line-height:130%; &nbsp;</SPAN><LI><SPAN>} &nbsp;</SPAN><LI class=alt><SPAN>#footer{ &nbsp;</SPAN><LI><SPAN>background:#CDDBED; &nbsp;</SPAN><LI class=alt><SPAN>border-top:solid5px#FFFFFF; &nbsp;</SPAN><LI><SPAN>text-align:center; &nbsp;</SPAN><LI class=alt><SPAN>height:60px; &nbsp;</SPAN><LI><SPAN>clear:both; &nbsp;</SPAN><LI class=alt><SPAN>} &nbsp;</SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>style</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>head</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>bodyonload</SPAN><SPAN class=tag-name>bodyonload</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"P7_equalCols('fbox','mbox','sbox')"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"header"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>h3</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>脚本控制三行三列自适应高度DIV布局</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h3</SPAN><SPAN class=tag>&gt;</SPAN><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"mid"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"fbox"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,</SPAN><LI><SPAN>但是有视力障碍-你我变老时就会成为他们的一员。 &nbsp;</SPAN><LI class=alt><SPAN>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;</SPAN><LI class=alt><SPAN>拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。 &nbsp;</SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,</SPAN><LI class=alt><SPAN>但是有视力障碍-你我变老时就会成为他们的一员。 &nbsp;</SPAN><LI><SPAN>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;</SPAN><LI><SPAN>拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。 &nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"mbox"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,</SPAN><LI class=alt><SPAN>但是有视力障碍-你我变老时就会成为他们的一员。 &nbsp;</SPAN><LI><SPAN>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;</SPAN><LI><SPAN>拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。 &nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN>如果设计者使用像素为单位指定文字大小,大多数的用户将无法缩放文字,</SPAN><LI class=alt><SPAN>因为InternetExplorer改变文字大小的方式与别的浏览器不同。 &nbsp;</SPAN><LI><SPAN>Mozilla和Opera可以缩放已经设定像素大小的文字,而Windows下的IE却不能。 &nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,</SPAN><LI class=alt><SPAN>但是有视力障碍-你我变老时就会成为他们的一员。 &nbsp;</SPAN><LI><SPAN>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;</SPAN><LI><SPAN>拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。 &nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN>如果设计者使用像素为单位指定文字大小,大多数的用户将无法缩放文字,</SPAN><LI class=alt><SPAN>因为InternetExplorer改变文字大小的方式与别的浏览器不同。Mozilla和Opera可以缩放</SPAN><LI class=alt><SPAN>已经设定像素大小的文字,</SPAN><SPAN>而Windows下的IE却不能。 &nbsp;</SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sbox"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,</SPAN><LI><SPAN>但是有视力障碍-你我变老时就会成为他们的一员。 &nbsp;</SPAN><LI class=alt><SPAN>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;</SPAN><LI class=alt><SPAN>拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。 &nbsp;</SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"footer"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>h5</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>制作:Yzci.Com</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h5</SPAN><SPAN class=tag>&gt;</SPAN><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>body</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>html</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN>&nbsp;</SPAN></LI></OL></PRE> <P>&nbsp;[可先修改部分代码再运行查看效果]#p#</P> <P><STRONG>4.采用负的外边界和内补丁相结合</STRONG></P> <P>不需要事先知道哪列的高度。</P> <P>hacks比较多(主要是opera的),但容易使用,推荐:</P> <P>SourceCodetoRun&nbsp;</P><PRE><OL class=dp-xml><LI class=alt><SPAN><SPAN></SPAN><LI><SPAN>&nbsp;</SPAN><LI class=alt><SPAN>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>htmlxmlns</SPAN><SPAN class=tag-name>htmlxmlns</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"http://www.w3.org/1999/xhtml"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>head</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>metahttp-equiv</SPAN><SPAN class=tag-name>metahttp-equiv</SPAN><SPAN>="Content-Type"</SPAN><SPAN class=attribute-value>content</SPAN><SPAN>="text/html;</SPAN><SPAN class=attribute>charset</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>utf</SPAN><SPAN>-8"</SPAN><SPAN class=tag>/&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>title</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>Equalheight(DIV+CSS布局中自适应高度的解决方法)</SPAN><SPAN class=tag></< span><SPAN class=tag-name>title</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>styletype</SPAN><SPAN class=tag-name>styletype</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"text/css"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN>body{ &nbsp;</SPAN><LI><SPAN>padding:0; &nbsp;</SPAN><LI class=alt><SPAN>margin:0; &nbsp;</SPAN><LI><SPAN>font-size:12px; &nbsp;</SPAN><LI class=alt><SPAN>font-family:Arial,Helvetica,sans-serif; &nbsp;</SPAN><LI><SPAN>line-height:140%; &nbsp;</SPAN><LI class=alt><SPAN>text-align:center; &nbsp;</SPAN><LI><SPAN>background:#E7DFD3; &nbsp;</SPAN><LI class=alt><SPAN>} &nbsp;</SPAN><LI><SPAN>#wrap{ &nbsp;</SPAN><LI class=alt><SPAN>width:750px; &nbsp;</SPAN><LI><SPAN>margin:0auto; &nbsp;</SPAN><LI class=alt><SPAN>overflow:hidden; &nbsp;</SPAN><LI><SPAN>} &nbsp;</SPAN><LI class=alt><SPAN>#header{ &nbsp;</SPAN><LI><SPAN>background:#E8E8E8; &nbsp;</SPAN><LI class=alt><SPAN>} &nbsp;</SPAN><LI><SPAN>#sideleft{ &nbsp;</SPAN><LI class=alt><SPAN>width:580px; &nbsp;</SPAN><LI><SPAN>float:left; &nbsp;</SPAN><LI class=alt><SPAN>background:#FFF; &nbsp;</SPAN><LI><SPAN>text-align:left; &nbsp;</SPAN><LI class=alt><SPAN>} &nbsp;</SPAN><LI><SPAN>#sideright{ &nbsp;</SPAN><LI class=alt><SPAN>width:170px; &nbsp;</SPAN><LI><SPAN>float:left; &nbsp;</SPAN><LI class=alt><SPAN>background:#F0F0F0; &nbsp;</SPAN><LI><SPAN>text-align:left; &nbsp;</SPAN><LI class=alt><SPAN>} &nbsp;</SPAN><LI><SPAN>/*easyclearing*/ &nbsp;</SPAN><LI class=alt><SPAN>#wrap:after &nbsp;</SPAN><LI><SPAN>{ &nbsp;</SPAN><LI class=alt><SPAN>content:'[DONOTLEAVEITISNOTREAL]'; &nbsp;</SPAN><LI><SPAN>display:block; &nbsp;</SPAN><LI class=alt><SPAN>height:0; &nbsp;</SPAN><LI><SPAN>clear:both; &nbsp;</SPAN><LI class=alt><SPAN>visibility:hidden; &nbsp;</SPAN><LI><SPAN>} &nbsp;</SPAN><LI class=alt><SPAN>#wrap &nbsp;</SPAN><LI><SPAN>{ &nbsp;</SPAN><LI class=alt><SPAN>display:inline-block; &nbsp;</SPAN><LI><SPAN>} &nbsp;</SPAN><LI class=alt><SPAN>/*\*/ &nbsp;</SPAN><LI><SPAN>#wrap &nbsp;</SPAN><LI class=alt><SPAN>{ &nbsp;</SPAN><LI><SPAN>display:block; &nbsp;</SPAN><LI class=alt><SPAN>} &nbsp;</SPAN><LI><SPAN>/*endeasyclearing*/ &nbsp;</SPAN><LI class=alt><SPAN>/*\*/ &nbsp;</SPAN><LI><SPAN>#sideleft,#sideright &nbsp;</SPAN><LI class=alt><SPAN>{ &nbsp;</SPAN><LI><SPAN>padding-bottom:32767px!important; &nbsp;</SPAN><LI class=alt><SPAN>margin-bottom:-32767px!important; &nbsp;</SPAN><LI><SPAN>} &nbsp;</SPAN><LI class=alt><SPAN>@mediaalland(min-width:0px){ &nbsp;</SPAN><LI><SPAN>#sideleft,#sideright &nbsp;</SPAN><LI class=alt><SPAN>{ &nbsp;</SPAN><LI><SPAN>padding-bottom:0!important; &nbsp;</SPAN><LI class=alt><SPAN>margin-bottom:0!important; &nbsp;</SPAN><LI><SPAN>} &nbsp;</SPAN><LI class=alt><SPAN>#sideleft:before,#sideright:before &nbsp;</SPAN><LI><SPAN>{ &nbsp;</SPAN><LI class=alt><SPAN>content:'[DONOTLEAVEITISNOTREAL]'; &nbsp;</SPAN><LI><SPAN>display:block; &nbsp;</SPAN><LI class=alt><SPAN>background:inherit; &nbsp;</SPAN><LI><SPAN>padding-top:32767px!important; &nbsp;</SPAN><LI class=alt><SPAN>margin-bottom:-32767px!important; &nbsp;</SPAN><LI><SPAN>height:0; &nbsp;</SPAN><LI class=alt><SPAN>} &nbsp;</SPAN><LI><SPAN>} &nbsp;</SPAN><LI class=alt><SPAN>/**/ &nbsp;</SPAN><LI><SPAN>#footer{ &nbsp;</SPAN><LI class=alt><SPAN>background:#E8E8E8; &nbsp;</SPAN><LI><SPAN>width:100%; &nbsp;</SPAN><LI class=alt><SPAN>float:left; &nbsp;</SPAN><LI><SPAN>} &nbsp;</SPAN><LI class=alt><SPAN>h1,h2,address,p{ &nbsp;</SPAN><LI><SPAN>margin:0; &nbsp;</SPAN><LI class=alt><SPAN>padding:.8em; &nbsp;</SPAN><LI><SPAN>} &nbsp;</SPAN><LI class=alt><SPAN>h1,h2{font-size:20px;} &nbsp;</SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>style</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>head</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>body</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"wrap"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"header"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>h1</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>Head</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h1</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideleft"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>sideleft</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用,</SPAN><LI class=alt><SPAN>就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>像素是计算机屏幕上的不可缩放的点,而一个 &nbsp;</SPAN><LI class=alt><SPAN>h3就是一个字大小的方块。由于字体大小的变化,h3 &nbsp;</SPAN><LI><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>采用印刷式的固定设计方案或许要容易些,因为如果尺寸不变,则考虑的东西就相对较少。</SPAN><LI class=alt><SPAN>可是如果采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。</SPAN><LI><SPAN>任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用,</SPAN><LI class=alt><SPAN>就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>像素是计算机屏幕上的不可缩放的点,而一个 &nbsp;</SPAN><LI class=alt><SPAN>h3就是一个字大小的方块。由于字体大小的变化,h3 &nbsp;</SPAN><LI><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>采用印刷式的固定设计方案或许要容易些,因为如果尺寸不变,则考虑的东西就相对较少。</SPAN><LI class=alt><SPAN>可是如果采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。</SPAN><LI><SPAN>任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideright"</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>sideright</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用,</SPAN><LI><SPAN>就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>&nbsp;</SPAN><LI class=alt><SPAN class=tag>&lt;</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>&gt;</SPAN><SPAN>像素是计算机屏幕上的不可缩放的点,而一个 &nbsp;</SPAN><LI><SP