135-1821-9792
你对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://wtcwzsj.com/article/cocooog.html">http://wtcwzsj.com/article/cocooog.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/cdsdopc.html">App制作流程、步骤？（app服务端开发标准）</a> </li><li> <a href="/article/cdsdode.html">网站SEO诊断分析和优化方案，怎么写？</a> </li><li> <a href="/article/cdsdopi.html">百度推广效果如何提高,了解百度推广效果的几个关键因素</a> </li><li> <a href="/article/cdsdoho.html">Redis集群槽一种新的架构概念（Redis的集群槽的概念）</a> </li><li> <a href="/article/cdsdosd.html">oracle连接报错12545</a> </li> </ul> </div> </div> <!-- end #bd --> <div class="c"></div> <!-- begin #fd --> <div id="fd" class="index-fd pr"> <div class="map-bg3"></div> <div class="wp"> <div class="fd-top"> <dl> <dt>关于我们</dt> <dd> <ul class="ul-fd"> <li><a href="http://www.wtcwzsj.com/about#whous">我们是谁</a></li> <li><a href="http://www.wtcwzsj.com/about#ourcus">我们服务的客户</a></li> <li><a href="http://www.wtcwzsj.com/about#ourteam">我们的团队</a></li> </ul> </dd> </dl> <dl> <dt>我们的服务</dt> <dd> <ul class="ul-fd"> <li><a href="http://www.wtcwzsj.com/service#webbuit">网站建设</a></li> <li><a href="http://www.wtcwzsj.com/service#weiweb">H5响应式 交互网站</a></li> <li><a href="http://www.wtcwzsj.com/service#webmobel">移动端 & 微网站定制</a></li> <li><a href="http://www.wtcwzsj.com/service#servweb">服务流程</a></li> <li><a href="http://www.wtcwzsj.com/service#solution">行业解决方案</a></li> </ul> </dd> </dl> <dl> <dt>网站建设案例</dt> <dd> <ul class="ul-fd"> <li><a href="http://www.wtcwzsj.com/case/">公司集团</a></li> <li><a href="http://www.wtcwzsj.com/case/">数码电子科技</a></li> <li><a href="http://www.wtcwzsj.com/case/">建筑与设计</a></li> <li><a href="http://www.wtcwzsj.com/case/">安防门禁</a></li> <li><a href="http://www.wtcwzsj.com/case/">管理咨询美容</a></li> <li><a href="http://www.wtcwzsj.com/case/">外贸行业</a></li> </ul> </dd> </dl> <dl> <dt>新闻动态</dt> <dd> <ul class="ul-fd"> <li><a href="/news/2.html">温岭网站建设</a></li><li><a href="/news/3.html">温岭网站制作</a></li><li><a href="/news/4.html">温岭网站设计</a></li> </ul> </dd> </dl> <dl> <dt>联系我们</dt> <dd class="pr"> <p><a href="http://www.wtcwzsj.com/news/" class="weixin"></a><a href="http://www.wtcwzsj.com/news/" class="sina"></a><span class="weixin-pic"><img src="/Public/Home/pic/ewm.jpg"></span></p> <p><b class="tel">135-1821-9792</b></p> <h5>公司服务热线</h5> </dd> </dl> </div> <div class="link"> 友情链接： <a href="http://www.schdfang.cn/" title="气球装饰" target="_blank">气球装饰</a> <a href="http://www.gyjierui.cn/" title="雷运建站" target="_blank">雷运建站</a> <a href="http://www.qyjmty.com/" title="茶叶包装盒设计" target="_blank">茶叶包装盒设计</a> <a href="http://www.whsgsdz.com/" title="whsgsdz.com" target="_blank">whsgsdz.com</a> <a href="https://www.cdcxhl.com/koubei.html" title="网络口碑营销" target="_blank">网络口碑营销</a> <a href="http://www.cdkjz.cn/fangan/secu/" title="安防网站建设方案" target="_blank">安防网站建设方案</a> <a href="http://www.dlganxi.com/" title="公司网站维护" target="_blank">公司网站维护</a> <a href="http://www.csjike.com/" title="成都封阳台" target="_blank">成都封阳台</a> <a href="http://www.4006tel.net/yingxiao/" title="seo优化" target="_blank">seo优化</a> <a href="http://www.cdmstgs.com/" title="成都商业雕塑" target="_blank">成都商业雕塑</a> </div> </div> <div class="fd-copy"> <div class="wp"> <p><span style="color:#CCCCCC;">Copyright © 2009-2022 www.wtcwzsj.com 青羊区广皓图文设计工作室（个体工商户） 版权所有</span> <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow" style="color:#CCCCCC;">蜀ICP备19037934号</a></p> </div> </div> </div> <div class="side"> <ul> <li><a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" target="_blank"> <div class="sidebox"><img src="/Public/Home/pic/side_icon02.png">在线咨询</div> </a></li> <li><a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" target="_blank"> <div class="sidebox"><img src="/Public/Home/pic/side_icon01.png">在线咨询</div> </a></li> <li><a href="tel:135-1821-9792"> <div class="sidebox"><img src="/Public/Home/pic/side_icon03.png"><span style="font-size:14px">135-1821-9792</span></div> </a></li> </ul> </div> <div class="side2"> <ul> <li><a href="http://www.wtcwzsj.com/news/"><img src="/Public/Home/pic/r_icon1.png" alt="温岭网站建设"></a> <div class="weixin"><em></em><img src="/Public/Home/pic/ewm.jpg" alt="温岭网站建设"></div> </li> <li><a href="javascript:goTop();" class="sidetop"><img src="/Public/Home/pic/r_icon2.png"></a></li> </ul> </div> <div class="fot"> <ul> <li> <a href="https://p.qiao.baidu.com/cps/mobileChat?siteId=11284691&userId=6256368&type=1&reqParam=%20{%22from%22:0,%22sessionid%22:%22%22,%22siteId%22:%2211284691%22,%22tid%22:%22-1%22,%22userId%22:%226256368%22,%22ttype%22:1,%22siteConfig%22:%20{%22eid%22:%226256368%22,%22queuing%22:%22%22,%22siteToken%22:%226ce441ff9e2d6bedbdfc2a4138de449e%22,%22userId%22:%226256368%22,%22isGray%22:%22false%22,%22wsUrl%22:%22wss://p.qiao.baidu.com/cps3/websocket%22,%22likeVersion%22:%22generic%22,%22siteId%22:%2211284691%22,%22online%22:%22true%22,%22webRoot%22:%22//p.qiao.baidu.com/cps3/%22,%22bid%22:%22160142915792139572%22,%22isSmallFlow%22:0,%22isPreonline%22:0,%22invited%22:0%20},%22config%22:%20{%22themeColor%22:%224d74fa%22%20}%20}&appId=&referer=&iswechat=0&expectWaiter=-1&openid=null&otherParam=null&telephone=null&speedLogId=null&eid=null&siteToken=6ce441ff9e2d6bedbdfc2a4138de449e" target="_blank"> <img src="/Public/Home/pic/fot1.png" alt=""> <p>在线咨询</p> </a> </li> <li> <a href="tel:18980820575" target="_blank"> <img src="/Public/Home/pic/fot2.png" alt=""> <p>拨打电话</p> </a> </li> </ul> </div> <script type="text/javascript" src="/Public/Home/pic/jquery.js"></script> <script type="text/javascript" src="/Public/Home/pic/lib.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>