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

你对Div高度自适应的方法是否了解，这里和大家分享一下5种常用Div高度自适应的方法，希望对你的学习有所帮助。
成都创新互联公司专注于沅陵网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供沅陵营销型网站建设，沅陵网站制作、沅陵网页设计、沅陵网站官网定制、重庆小程序开发公司服务，打造沅陵网络公司原创品牌,更为您提供沅陵网站排名全网营销落地服务。
5种常用Div高度自适应的方法
1.背景图填充
这是使用最广泛的一种做法，无hacks，推荐使用：
SourceCodetoRun
 
 
  
  
  
  
  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  
  
  
  
  
  
  
  Equalheight(列高度相同的方法) title></li>
  
  <li><styletypestyletype="text/css"></li>
  
  <li>body{ </li>
  
  <li>padding:0; </li>
  
  <li>margin:0; </li>
  
  <li>font-size:12px; </li>
  
  <li>font-family:Arial,Helvetica,sans-serif; </li>
  
  <li>line-height:140%; </li>
  
  <li>background:#E7DFD3; </li>
  
  <li>} </li>
  
  <li>#middle{ </li>
  
  <li>width:580px; </li>
  
  <li>float:left; </li>
  
  <li>background:#FFFFFF; </li>
  
  <li>text-align:left; </li>
  
  <li>} </li>
  
  <li>#header,#footer{ </li>
  
  <li>background:#E8E8E8; </li>
  
  <li>width:750px; </li>
  
  <li>text-align:center; </li>
  
  <li>} </li>
  
  <li>#sideleft{ </li>
  
  <li>width:580px; </li>
  
  <li>float:left; </li>
  
  <li>position:relative; </li>
  
  <li>margin-left:-580px; </li>
  
  <li>} </li>
  
  <li>#sideright{ </li>
  
  <li>width:170px; </li>
  
  <li>float:right; </li>
  
  <li>position:relative; </li>
  
  <li>margin:0-170px00; </li>
  
  <li>background:#F0F0F0; </li>
  
  <li>} </li>
  
  <li>#footer{ </li>
  
  <li>clear:both; </li>
  
  <li>} </li>
  
  <li>h1,h2,address,p{ </li>
  
  <li>margin:0; </li>
  
  <li>padding:.8em; </li>
  
  <li>} </li>
  
  <li>h1,h2{font-size:20px;} </li>
  
  <li> style></li>
  
  <li><scripttypescripttype="text/javascript"></li>
  
  <li>// </span> <LI><SPAN> </SPAN><LI class=alt><SPAN><SPAN class=cdata>functiontoggleContent(name,n){ </SPAN> </SPAN><LI><SPAN><SPAN class=cdata>vari,t='',el=document.getElementById(name); </SPAN> </SPAN><LI class=alt><SPAN><SPAN class=cdata>if(!el.origCont)el.origCont=el.innerHTML; </SPAN> </SPAN><LI><SPAN> </SPAN><LI class=alt><SPAN><SPAN class=cdata>for(i=0;i<N;I++)T+=EL.ORIGCONT; span <> </SPAN><LI><SPAN><SPAN class=cdata>el.innerHTML=t; </SPAN> </SPAN><LI class=alt><SPAN><SPAN class=cdata>} </SPAN> </SPAN><LI><SPAN> </SPAN><LI class=alt><SPAN><SPAN class=cdata>//]]></SPAN><SPAN> </SPAN></SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>script</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>body</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"header"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>h1</SPAN><SPAN class=tag>></SPAN><SPAN>Head</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h1</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"middle"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideright"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideleft"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN>sideleft</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>默认长度加长页面</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。  </SPAN><LI class=alt><SPAN>但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，  </SPAN><LI><SPAN>同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个  </SPAN><LI><SPAN>h3就是一个字大小的方块。由于字体大小的变化，h3  </SPAN><LI class=alt><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>采用印刷式的固定设计方案或许要容易些，  </SPAN><LI class=alt><SPAN>因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，</SPAN><LI class=alt><SPAN>就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>也许你想你的网站以某种特定的方式显示，  </SPAN><LI class=alt><SPAN>但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，</SPAN><LI class=alt><SPAN>从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、  </SPAN><LI class=alt><SPAN>相对的设计方法并不容易。但是如果恰当利用，  </SPAN><LI><SPAN>就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN>sideright</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、  </SPAN><LI><SPAN>相对的设计方法并不容易。但是如果恰当利用，  </SPAN><LI class=alt><SPAN>就可以成为增强亲和力和易用性的一个自然选择，  </SPAN><LI><SPAN>同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个  </SPAN><LI><SPAN>h3就是一个字大小的方块。由于字体大小的变化，h3  </SPAN><LI class=alt><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，</SPAN><LI><SPAN>则考虑的东西就相对较少。  </SPAN><LI class=alt><SPAN>可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。  </SPAN><LI class=alt><SPAN>任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"footer"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN>Footer  </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>address</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>制作：Yzci.Com</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>body</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>html</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN> </SPAN></LI></OL></PRE> <P> [可先修改部分代码再运行查看效果]#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 </P><PRE><OL class=dp-xml><LI class=alt><SPAN><SPAN></SPAN><LI><SPAN> </SPAN><LI class=alt><SPAN>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</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>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</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>/></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>title</SPAN><SPAN class=tag>></SPAN><SPAN>Equalheight(使用JS实现列高度相同的方法)</SPAN><SPAN class=tag></< span><SPAN class=tag-name>title</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>styletype</SPAN><SPAN class=tag-name>styletype</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"text/css"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>body{  </SPAN><LI><SPAN>padding:0;  </SPAN><LI class=alt><SPAN>margin:0;  </SPAN><LI><SPAN>font-size:12px;  </SPAN><LI class=alt><SPAN>font-family:Arial,Helvetica,sans-serif;  </SPAN><LI><SPAN>line-height:140%;  </SPAN><LI class=alt><SPAN>text-align:center;  </SPAN><LI><SPAN>background:#E7DFD3;  </SPAN><LI class=alt><SPAN>}  </SPAN><LI><SPAN>#wrap{  </SPAN><LI class=alt><SPAN>width:750px;  </SPAN><LI><SPAN>margin:0auto;  </SPAN><LI class=alt><SPAN>/*overflow:hidden;*/  </SPAN><LI><SPAN>}  </SPAN><LI class=alt><SPAN>#header{  </SPAN><LI><SPAN>background:#E8E8E8;  </SPAN><LI class=alt><SPAN>}  </SPAN><LI><SPAN>#sideleft{  </SPAN><LI class=alt><SPAN>width:580px;  </SPAN><LI><SPAN>float:left;  </SPAN><LI class=alt><SPAN>background:#FFF;  </SPAN><LI><SPAN>text-align:left;  </SPAN><LI class=alt><SPAN>}  </SPAN><LI><SPAN>#sideright{  </SPAN><LI class=alt><SPAN>width:170px;  </SPAN><LI><SPAN>float:left;  </SPAN><LI class=alt><SPAN>background:#F0F0F0;  </SPAN><LI><SPAN>text-align:left;  </SPAN><LI class=alt><SPAN>}  </SPAN><LI><SPAN>#footer{  </SPAN><LI class=alt><SPAN>background:#E8E8E8;  </SPAN><LI><SPAN>width:100%;  </SPAN><LI class=alt><SPAN>float:left;  </SPAN><LI><SPAN>}  </SPAN><LI class=alt><SPAN>h1,h2,address,p{  </SPAN><LI><SPAN>margin:0;  </SPAN><LI class=alt><SPAN>padding:.8em;  </SPAN><LI><SPAN>}  </SPAN><LI class=alt><SPAN>h1,h2{font-size:20px;}  </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>style</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>body</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"wrap"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"header"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>h1</SPAN><SPAN class=tag>></SPAN><SPAN>Head</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h1</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideleft"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN>sideleft</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，</SPAN><LI class=alt><SPAN>就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个  </SPAN><LI class=alt><SPAN>h3就是一个字大小的方块。由于字体大小的变化，h3  </SPAN><LI><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。</SPAN><LI class=alt><SPAN>可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。</SPAN><LI><SPAN>任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，</SPAN><LI class=alt><SPAN>就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个  </SPAN><LI class=alt><SPAN>h3就是一个字大小的方块。由于字体大小的变化，h3  </SPAN><LI><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。</SPAN><LI class=alt><SPAN>可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。</SPAN><LI><SPAN>任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideright"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN>sideright</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，</SPAN><LI><SPAN>就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个  </SPAN><LI><SPAN>h3就是一个字大小的方块。由于字体大小的变化，h3  </SPAN><LI class=alt><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。</SPAN><LI><SPAN>可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。</SPAN><LI class=alt><SPAN>任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>scripttype</SPAN><SPAN class=tag-name>scripttype</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"text/javascript"</SPAN><SPAN class=tag>></SPAN><SPAN> </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"  </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>script</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"footer"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>Footer  </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>address</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>制作：Yzci.Com</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>body</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>html</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN> </SPAN></LI></OL></PRE> <P> [可先修改部分代码再运行查看效果]#p#</P> <P><STRONG>3.采用脚本控制列的高度（二）</STRONG></P> <P>不需要事先知道哪列的高度，脚本自动判断。<BR>代码较复杂，有点延时：</P> <P>SourceCodetoRun </P><PRE><OL class=dp-xml><LI class=alt><SPAN><SPAN></SPAN><LI><SPAN> </SPAN><LI class=alt><SPAN>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</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>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>title</SPAN><SPAN class=tag>></SPAN><SPAN>脚本控制三行三列自适应高度DIV布局</SPAN><SPAN class=tag></< span><SPAN class=tag-name>title</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</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>></SPAN><SPAN class=tag></< span><SPAN class=tag-name>script</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>styletype</SPAN><SPAN class=tag-name>styletype</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"text/css"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>body{  </SPAN><LI><SPAN>font-size:75%;  </SPAN><LI class=alt><SPAN>font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;  </SPAN><LI><SPAN>line-height:100%;  </SPAN><LI class=alt><SPAN>margin:5px;  </SPAN><LI><SPAN>padding:0px;  </SPAN><LI class=alt><SPAN>}  </SPAN><LI><SPAN>#header,#mid,#footer{  </SPAN><LI class=alt><SPAN>width:760px;  </SPAN><LI><SPAN>margin:0pxauto;  </SPAN><LI class=alt><SPAN>padding:0px;  </SPAN><LI><SPAN>}  </SPAN><LI class=alt><SPAN>#header{  </SPAN><LI><SPAN>background:#F4F4F4;  </SPAN><LI class=alt><SPAN>height:60px;  </SPAN><LI><SPAN>margin-bottom:5px;  </SPAN><LI class=alt><SPAN>}  </SPAN><LI><SPAN>h3,h5{  </SPAN><LI class=alt><SPAN>padding-top:25px;  </SPAN><LI><SPAN>color:#708090;  </SPAN><LI class=alt><SPAN>text-align:center;  </SPAN><LI><SPAN>margin:0;  </SPAN><LI class=alt><SPAN>}  </SPAN><LI><SPAN>#fbox{  </SPAN><LI class=alt><SPAN>background:#F1F1F1;  </SPAN><LI><SPAN>width:195px;  </SPAN><LI class=alt><SPAN>float:left;  </SPAN><LI><SPAN>}  </SPAN><LI class=alt><SPAN>#mbox{  </SPAN><LI><SPAN>background:#DFF7FF;  </SPAN><LI class=alt><SPAN>margin:0px5px0px;  </SPAN><LI><SPAN>padding:0px;  </SPAN><LI class=alt><SPAN>float:left;  </SPAN><LI><SPAN>width:360px;  </SPAN><LI class=alt><SPAN>}  </SPAN><LI><SPAN>#sbox{  </SPAN><LI class=alt><SPAN>background:#FFEBCC;  </SPAN><LI><SPAN>width:195px;  </SPAN><LI class=alt><SPAN>float:right;  </SPAN><LI><SPAN>}  </SPAN><LI class=alt><SPAN>p{  </SPAN><LI><SPAN>margin:0px;  </SPAN><LI class=alt><SPAN>padding:10px;  </SPAN><LI><SPAN>text-indent:2em;  </SPAN><LI class=alt><SPAN>line-height:130%;  </SPAN><LI><SPAN>}  </SPAN><LI class=alt><SPAN>#footer{  </SPAN><LI><SPAN>background:#CDDBED;  </SPAN><LI class=alt><SPAN>border-top:solid5px#FFFFFF;  </SPAN><LI><SPAN>text-align:center;  </SPAN><LI class=alt><SPAN>height:60px;  </SPAN><LI><SPAN>clear:both;  </SPAN><LI class=alt><SPAN>}  </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>style</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</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>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"header"</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>h3</SPAN><SPAN class=tag>></SPAN><SPAN>脚本控制三行三列自适应高度DIV布局</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h3</SPAN><SPAN class=tag>></SPAN><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"mid"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"fbox"</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，</SPAN><LI><SPAN>但是有视力障碍-你我变老时就会成为他们的一员。  </SPAN><LI class=alt><SPAN>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；</SPAN><LI class=alt><SPAN>拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。  </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，</SPAN><LI class=alt><SPAN>但是有视力障碍-你我变老时就会成为他们的一员。  </SPAN><LI><SPAN>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；</SPAN><LI><SPAN>拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。  </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"mbox"</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，</SPAN><LI class=alt><SPAN>但是有视力障碍-你我变老时就会成为他们的一员。  </SPAN><LI><SPAN>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；</SPAN><LI><SPAN>拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。  </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，</SPAN><LI class=alt><SPAN>因为InternetExplorer改变文字大小的方式与别的浏览器不同。  </SPAN><LI><SPAN>Mozilla和Opera可以缩放已经设定像素大小的文字，而Windows下的IE却不能。  </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，</SPAN><LI class=alt><SPAN>但是有视力障碍-你我变老时就会成为他们的一员。  </SPAN><LI><SPAN>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；</SPAN><LI><SPAN>拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。  </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，</SPAN><LI class=alt><SPAN>因为InternetExplorer改变文字大小的方式与别的浏览器不同。Mozilla和Opera可以缩放</SPAN><LI class=alt><SPAN>已经设定像素大小的文字，</SPAN><SPAN>而Windows下的IE却不能。  </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sbox"</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，</SPAN><LI><SPAN>但是有视力障碍-你我变老时就会成为他们的一员。  </SPAN><LI class=alt><SPAN>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；</SPAN><LI class=alt><SPAN>拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。  </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"footer"</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>h5</SPAN><SPAN class=tag>></SPAN><SPAN>制作：Yzci.Com</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h5</SPAN><SPAN class=tag>></SPAN><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>body</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>html</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN> </SPAN></LI></OL></PRE> <P> [可先修改部分代码再运行查看效果]#p#</P> <P><STRONG>4.采用负的外边界和内补丁相结合</STRONG></P> <P>不需要事先知道哪列的高度。</P> <P>hacks比较多（主要是opera的），但容易使用，推荐：</P> <P>SourceCodetoRun </P><PRE><OL class=dp-xml><LI class=alt><SPAN><SPAN></SPAN><LI><SPAN> </SPAN><LI class=alt><SPAN>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</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>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</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>/></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>title</SPAN><SPAN class=tag>></SPAN><SPAN>Equalheight(DIV+CSS布局中自适应高度的解决方法)</SPAN><SPAN class=tag></< span><SPAN class=tag-name>title</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>styletype</SPAN><SPAN class=tag-name>styletype</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"text/css"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>body{  </SPAN><LI><SPAN>padding:0;  </SPAN><LI class=alt><SPAN>margin:0;  </SPAN><LI><SPAN>font-size:12px;  </SPAN><LI class=alt><SPAN>font-family:Arial,Helvetica,sans-serif;  </SPAN><LI><SPAN>line-height:140%;  </SPAN><LI class=alt><SPAN>text-align:center;  </SPAN><LI><SPAN>background:#E7DFD3;  </SPAN><LI class=alt><SPAN>}  </SPAN><LI><SPAN>#wrap{  </SPAN><LI class=alt><SPAN>width:750px;  </SPAN><LI><SPAN>margin:0auto;  </SPAN><LI class=alt><SPAN>overflow:hidden;  </SPAN><LI><SPAN>}  </SPAN><LI class=alt><SPAN>#header{  </SPAN><LI><SPAN>background:#E8E8E8;  </SPAN><LI class=alt><SPAN>}  </SPAN><LI><SPAN>#sideleft{  </SPAN><LI class=alt><SPAN>width:580px;  </SPAN><LI><SPAN>float:left;  </SPAN><LI class=alt><SPAN>background:#FFF;  </SPAN><LI><SPAN>text-align:left;  </SPAN><LI class=alt><SPAN>}  </SPAN><LI><SPAN>#sideright{  </SPAN><LI class=alt><SPAN>width:170px;  </SPAN><LI><SPAN>float:left;  </SPAN><LI class=alt><SPAN>background:#F0F0F0;  </SPAN><LI><SPAN>text-align:left;  </SPAN><LI class=alt><SPAN>}  </SPAN><LI><SPAN>/*easyclearing*/  </SPAN><LI class=alt><SPAN>#wrap:after  </SPAN><LI><SPAN>{  </SPAN><LI class=alt><SPAN>content:'[DONOTLEAVEITISNOTREAL]';  </SPAN><LI><SPAN>display:block;  </SPAN><LI class=alt><SPAN>height:0;  </SPAN><LI><SPAN>clear:both;  </SPAN><LI class=alt><SPAN>visibility:hidden;  </SPAN><LI><SPAN>}  </SPAN><LI class=alt><SPAN>#wrap  </SPAN><LI><SPAN>{  </SPAN><LI class=alt><SPAN>display:inline-block;  </SPAN><LI><SPAN>}  </SPAN><LI class=alt><SPAN>/*\*/  </SPAN><LI><SPAN>#wrap  </SPAN><LI class=alt><SPAN>{  </SPAN><LI><SPAN>display:block;  </SPAN><LI class=alt><SPAN>}  </SPAN><LI><SPAN>/*endeasyclearing*/  </SPAN><LI class=alt><SPAN>/*\*/  </SPAN><LI><SPAN>#sideleft,#sideright  </SPAN><LI class=alt><SPAN>{  </SPAN><LI><SPAN>padding-bottom:32767px!important;  </SPAN><LI class=alt><SPAN>margin-bottom:-32767px!important;  </SPAN><LI><SPAN>}  </SPAN><LI class=alt><SPAN>@mediaalland(min-width:0px){  </SPAN><LI><SPAN>#sideleft,#sideright  </SPAN><LI class=alt><SPAN>{  </SPAN><LI><SPAN>padding-bottom:0!important;  </SPAN><LI class=alt><SPAN>margin-bottom:0!important;  </SPAN><LI><SPAN>}  </SPAN><LI class=alt><SPAN>#sideleft:before,#sideright:before  </SPAN><LI><SPAN>{  </SPAN><LI class=alt><SPAN>content:'[DONOTLEAVEITISNOTREAL]';  </SPAN><LI><SPAN>display:block;  </SPAN><LI class=alt><SPAN>background:inherit;  </SPAN><LI><SPAN>padding-top:32767px!important;  </SPAN><LI class=alt><SPAN>margin-bottom:-32767px!important;  </SPAN><LI><SPAN>height:0;  </SPAN><LI class=alt><SPAN>}  </SPAN><LI><SPAN>}  </SPAN><LI class=alt><SPAN>/**/  </SPAN><LI><SPAN>#footer{  </SPAN><LI class=alt><SPAN>background:#E8E8E8;  </SPAN><LI><SPAN>width:100%;  </SPAN><LI class=alt><SPAN>float:left;  </SPAN><LI><SPAN>}  </SPAN><LI class=alt><SPAN>h1,h2,address,p{  </SPAN><LI><SPAN>margin:0;  </SPAN><LI class=alt><SPAN>padding:.8em;  </SPAN><LI><SPAN>}  </SPAN><LI class=alt><SPAN>h1,h2{font-size:20px;}  </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>style</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>body</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"wrap"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"header"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>h1</SPAN><SPAN class=tag>></SPAN><SPAN>Head</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h1</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideleft"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN>sideleft</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，</SPAN><LI class=alt><SPAN>就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个  </SPAN><LI class=alt><SPAN>h3就是一个字大小的方块。由于字体大小的变化，h3  </SPAN><LI><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。</SPAN><LI class=alt><SPAN>可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。</SPAN><LI><SPAN>任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，</SPAN><LI class=alt><SPAN>就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个  </SPAN><LI class=alt><SPAN>h3就是一个字大小的方块。由于字体大小的变化，h3  </SPAN><LI><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。</SPAN><LI class=alt><SPAN>可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。</SPAN><LI><SPAN>任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideright"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN>sideright</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，</SPAN><LI><SPAN>就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个  </SPAN><LI><SP            <br>
            本文名称：五大常用Div高度自适应的方法            <br>
            标题路径：<a href="http://cdysf.com/article/cocooog.html">http://cdysf.com/article/cocooog.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/djsdsih.html">探索Linux系统内存状态：一步一步分析内存信息（查看内存信息linux）</a>
                </li><li>
                    <a href="/article/djsdchh.html">北京云主机租用价格</a>
                </li><li>
                    <a href="/article/djsdsij.html">「轻松备案又快速」服务器清单，一目了然(服务器清单)</a>
                </li><li>
                    <a href="/article/djsdssc.html">linux怎么查看jdk是否安装</a>
                </li><li>
                    <a href="/article/djsdsig.html">礼盒怎么画?（礼盒怎么画简单又漂亮)</a>
                </li>        </ul>
    </div>
</div>
</div>
<footer>
    <div class="footop">
        <div class="wrap">
            <div class="bottomrpw">
                <div class="erp arp">
                    <dl>
                        <dt>ADDRESS</dt>
                        <dd class="address"> <i class="icon"></i> <span class="word">成都市青羊区锦天国际1号楼1002室</span> </dd>
                    </dl>
                </div>
                <div class="erp arp">
                    <dl>
                        <dt>TEL</dt>
                        <dd class="phonum"> <i class="icon"></i> <span class="word en"> <a href="tel:18980820575">18980820575</a> </span> </dd>
                    </dl>
                </div>
                <div class="erp crp">
                    <dl>
                        <dt>OTHER</dt>
                        <dd> <a class="word get-quote">获得报价与方案</a> </dd>
                        <dd> <a href="#" target="_blank" rel='nofollow' class="word" title="付款方式">付款方式</a> </dd>
                    </dl>
                </div>
                <div class="erp code-rp">
                    <dl>
                        <dt>Wechat</dt>
                        <dd class="code-wrap"> <span class="code"> <img src="/Public/Home/images/qr-code.jpg" alt="创帆新辰微信公众号" /> </span> </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    <div class="footerbot">
        <div class="friendlinks">
            <div class="wrap">
                <ul class="rpl">
                    <li><a href="http://www.cdxswst.cn/" title="成都柴油发电机组" target="_blank">成都柴油发电机组</a></li><li><a href="http://www.fushidz.cn/" title="成都服装定制" target="_blank">成都服装定制</a></li><li><a href="http://www.yucnv.com/" title="成都公司注册代理" target="_blank">成都公司注册代理</a></li><li><a href="http://www.cdkjz.cn/small/" title="成都小程序开发" target="_blank">成都小程序开发</a></li><li><a href="http://www.rjkgk.com/" title="成都商标注册" target="_blank">成都商标注册</a></li><li><a href="http://www.cxjianzhan.com/baojia/" title="成都网站建设报价" target="_blank">成都网站建设报价</a></li><li><a href="http://www.czcyfdj.com/" title="崇州静音发电机租赁" target="_blank">崇州静音发电机租赁</a></li><li><a href="http://www.cdstbpf.com/" title="成都生态板" target="_blank">成都生态板</a></li><li><a href="http://www.tyjike.cn/" title="成都图文广告制作" target="_blank">成都图文广告制作</a></li><li><a href="http://www.cdmeisitu.com/" title="景区公园导视牌" target="_blank">景区公园导视牌</a></li>                </ul>
            </div>
        </div>
        <div class="wrap">
            <div class="copyright"> <span class="en">©2007-2025</span> 青羊区创帆新辰信息咨询服务部（个体工商户） <span class="en">ALL RIGHTS
                        RESERVED.</span> <a rel="nofollow" href="http://www.miitbeian.gov.cn" target="_blank">蜀ICP备2025128472号</a> </div>
        </div>
    </div>
</footer>
<div class="fcwrap">
    <ul class="rpl clearfix">
        <li class="phone"> <a rel="nofollow" target="_blank" href="tel:18980820575"> <i class="icon"></i>
            <strong>18980820575</strong> </a> </li>
        <li class="qq"> <a rel="nofollow" target="_blank"
                           href="https://wpa.qq.com/msgrd?v=1&uin=244261566&site=qq&menu=yes"> <i class="icon"></i>
            <strong>244261566</strong> </a> </li>
        <li class="back-top"> <a href="javascript:void(0)" rel="nofollow" class="back-to-top"> <i class="icon"></i>
            <strong>回到顶部</strong> </a> </li>
    </ul>
</div>
<!--nav-->
<div class="n-Wrap">
    <div class="navBar visble show">
        <div class="barlogo">
            <a href="/" rel="nofollow">
                <img src="/Public/Home/images/logo1.png" alt="成都做网站" />
                <img src="/Public/Home/images/logo2.png" alt="成都网站设计" />
            </a>
        </div>
        <div class="bmenu">
            <i class="bar-top"><span></span></i>
            <i class="bar-cen"><span></span></i>
            <i class="bar-bom"><span></span></i>
            <i class="bar-left"><span></span></i>
            <i class="bar-right"><span></span></i>
        </div>
    </div>
    <section class="fixmenu">
        <div class="close-bar">
            <i class="bar-left"><span></span></i>
            <i class="bar-right"><span></span></i>
        </div>
        <nav class="smph">
            <ul>
                <li class="index-hrefs on"><a href="http://www.cdysf.com/"><font>首页</font></a></li>
                <li><a href="/about/" rel="nofollow"><font>关于我们</font></a></li>
                <li><a href="/service/" rel="nofollow"><font>网站建设</font></a></li>
                <li><a href="/case/" rel="nofollow"><font>网站案例</font></a></li>
                <li><a href="/solve/" rel="nofollow"><font>网站方案</font></a></li>
                <li><a href="/news/" rel="nofollow"><font>建站知识</font></a></li>
                <li><a href="/contact/" rel="nofollow"><font>联系创帆新辰</font></a></li>
            </ul>
            <div class="pwrap">
                <span class="label">建站热线</font>
                <strong class="phone"><a href="tel:18980820575">18980820575</a></strong>
            </div>
        </nav>
    </section>
</div>
<!--end nav-->
<script src="/Public/Home/js/hotcss.js"></script>
<script type="text/javascript" src="/Public/Home/js/su_new.js"></script>
</body>
</html>
<script>
    $(".con img").each(function(){
        var src = $(this).attr("src");    //获取图片地址
        var str=new RegExp("http");
        var result=str.test(src);
        if(result==false){
            var url = "https://www.cdcxhl.com"+src;    //绝对路径
            $(this).attr("src",url);
        }
    });
    window.onload=function(){
        document.oncontextmenu=function(){
            return false;
        }
    }
</script>
NEWS

网站建设资讯

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