你对Div高度自适应的方法是否了解，这里和大家分享一下5种常用Div高度自适应的方法，希望对你的学习有所帮助。
5种常用Div高度自适应的方法
1.背景图填充
这是使用最广泛的一种做法，无hacks，推荐使用：
SourceCodetoRun
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
- <title>Equalheight(列高度相同的方法) title>
- <styletypestyletype="text/css">
- body{
- padding:0;
- margin:0;
- font-size:12px;
- font-family:Arial,Helvetica,sans-serif;
- line-height:140%;
- background:#E7DFD3;
- }
- #middle{
- width:580px;
- float:left;
- background:#FFFFFF;
- text-align:left;
- }
- #header,#footer{
- background:#E8E8E8;
- width:750px;
- text-align:center;
- }
- #sideleft{
- width:580px;
- float:left;
- position:relative;
- margin-left:-580px;
- }
- #sideright{
- width:170px;
- float:right;
- position:relative;
- margin:0-170px00;
- background:#F0F0F0;
- }
- #footer{
- clear:both;
- }
- h1,h2,address,p{
- margin:0;
- padding:.8em;
- }
- h1,h2{font-size:20px;}
- style>
- <scripttypescripttype="text/javascript">
- // </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><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>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>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>5.采用负的左右边界和相对定位</STRONG></P> <P>下面的例子能较好地解决列高度相同的问题。<BR>三行二列布局，主要内容在左边，网页宽度750px,左列580px,右列170px。<BR>CSS代码：<BR>ExampleSourceCode </P><PRE><OL class=dp-xml><LI class=alt><SPAN><SPAN>#middle{ </SPAN></SPAN><LI><SPAN>width:580px; </SPAN><LI class=alt><SPAN>float:left; </SPAN><LI><SPAN>background:#FFFFFF; </SPAN><LI class=alt><SPAN>text-align:left; </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>#sideleft{ </SPAN><LI><SPAN>width:580px; </SPAN><LI class=alt><SPAN>float:left; </SPAN><LI><SPAN>position:relative; </SPAN><LI class=alt><SPAN>margin-left:-580px; </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>#sideright{ </SPAN><LI><SPAN>width:170px; </SPAN><LI class=alt><SPAN>float:right; </SPAN><LI><SPAN>position:relative; </SPAN><LI class=alt><SPAN>margin:0-170px00; </SPAN><LI><SPAN>background:#F0F0F0; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN> </SPAN><LI class=alt><SPAN>xhtml代码： </SPAN><LI><SPAN>ExampleSourceCode </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>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>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN> </SPAN></LI></OL></PRE> <P> 从结构看，middle（使用的是左列希望的背景色）在最外面，宽度等于sideleft的宽度，往里一层是sideright，其宽度为170px,浮动方向是右边。但其右面的边界是负的170px，相当于将sideright拉向右面（右面紧贴着middle的右边）170px的位置。而sideleft又是套在sideright里面的，其内容先于sideright出来，左边界是负的580，相当于在sideright左边580px，此时sideleft和middle位置重合。</P> <P>◆优点：不需要背景图片，无hacks，完全的自适应高度。</P> <P>◆缺点：现在的代码只能左对齐。</P> <P>文章来源:Div-Css.net设计网参考:http://www.div-css.net/div_css/topic/index.asp?id=7124</P> <P>【编辑推荐】</P> <OL> <LI><A href="http://developer./art/201008/221486.htm" target=_blank>DIV CSS网页布局开发参考规范</A></LI> <LI><A href="http://developer./art/201008/221258.htm" target=_blank>IE6.0对padding的解读分析</A></LI> <LI><A href="http://developer./art/201008/221413.htm" target=_blank>DIV+CSS网页错位诊断和解决方法</A></LI> <LI><A href="http://developer./art/201008/221488.htm" target=_blank>Float构建三栏DIV CSS网页布局</A></LI> <LI><A href="http://developer./art/201008/221430.htm" target=_blank>技术分享 如何使用CSS控制超链接文字样式</A></LI></OL> </SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></div> <div class="article-bottom"><span>责任编辑：佚名</span> <span> 来源： div-css.net</span></div> <div class="article-tags"><a href="https://so./?keywords=Div" target="_blank" class="tag-item">Div</a><a href="https://so./?keywords=%E9%AB%98%E5%BA%A6" target="_blank" class="tag-item">高度</a></div></article> <div class="zan"><img src="https://s5-media./cms/client/img/zanpc.bd208a1.png" alt> <img src="https://s5-media./cms/client/img/zanpchover.fdd60ba.png" alt class="unhover"></div> <div class="share" style="display:;"><div class="share-item"><img src="https://s5-media./cms/client/img/weixin.23cd8b3.png" alt> <span>分享到微信</span> <div class="wx-show" style="display:none;"><div id="qrcodediv2"></div> <p>微信扫码分享</p></div></div> <div class="share-item"><img src="https://s5-media./cms/client/img/weibo.16d6b4f.png" alt> <span>分享到微博</span></div></div> <section class="relevant-recommend"><div class="title">相关推荐</div> <div class="recommend-list"><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/222383.html" target="_blank" class="usehover article-irl-ct_title"><em>DIV</em><em>高度</em><em>自适应</em><em>方法</em>汇总</a> <!----> <!----></div> <a href="https://www./article/222383.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">本文向大家描述一下几种DIV高度自适应方法，网站制站中，我们经常要把两个并排显示的div实现一样高的效果，即每列高度（事先并不能确定哪列的高度）的相同。</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2010-08-30 09:52:03</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=DIV" class="split-left-m usehover">DIV</a><a target="_blank" href="https://so./?keywords=%E9%AB%98%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94" class="split-left-m usehover">高度自适应</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/222403.html" target="_blank" class="usehover article-irl-ct_title"><em>DIV</em><em>自适应</em><em>高度</em>写法简介</a> <!----> <!----></div> <a href="https://www./article/222403.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">DIV＋CSS设计俨然已成网页设计界的标准了,但有些小问题确实很棘手，例如令人头痛的“DIV自适应高度”问题。这里向大家介绍一下DIV只适应高度的写法。</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2010-08-30 10:26:20</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=DIV" class="split-left-m usehover">DIV</a><a target="_blank" href="https://so./?keywords=%E8%87%AA%E9%80%82%E5%BA%94%E9%AB%98%E5%BA%A6" class="split-left-m usehover">自适应高度</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/221626.html" target="_blank" class="usehover article-irl-ct_title">CSS技巧：3种<em>常用</em><em>方法</em>解决<em>div</em>列<em>高度</em><em>自适应</em></a> <!----> <!----></div> <a href="https://www./article/221626.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">解决div列高度自适的方法有很多种，这里向大家介绍三种最常用的方法给大家，相信本文介绍一定会让你有所收获的。</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2010-08-25 13:10:43</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=div" class="split-left-m usehover">div</a><a target="_blank" href="https://so./?keywords=%E9%AB%98%E5%BA%A6" class="split-left-m usehover">高度</a><a target="_blank" href="https://so./?keywords=CSS" class="split-left-m usehover">CSS</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/222361.html" target="_blank" class="usehover article-irl-ct_title">三种有效解决<em>DIV</em><em>高度</em><em>自适应</em><em>的</em><em>方法</em></a> <!----> <!----></div> <a href="https://www./article/222361.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">DIV高度自适应的问题你是否了解，本文向大家描述一下DIV高度自适应的三种有效解决方法，希望对你的学习有所帮助。</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2010-08-30 09:15:15</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=DIV%E9%AB%98%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94" class="split-left-m usehover">DIV高度自适应</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/222367.html" target="_blank" class="usehover article-irl-ct_title"><em>DIV</em><em>高度</em><em>自适应</em>及应该注意<em>的</em>问题</a> <!----> <!----></div> <a href="https://www./article/222367.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">DIV高度自适应是个值得研究的问题，本文向大家介绍一些关于div高度自适应的技巧，希望对你的学习有所帮助，欢迎大家一起来学习。</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2010-08-30 09:22:13</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=DIV" class="split-left-m usehover">DIV</a><a target="_blank" href="https://so./?keywords=%E9%AB%98%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94" class="split-left-m usehover">高度自适应</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/221956.html" target="_blank" class="usehover article-irl-ct_title">四种<em>方法</em>解决<em>DIV</em><em>高度</em><em>自适应</em>问题</a> <!----> <!----></div> <a href="https://www./article/221956.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">关于DIV高度的自适应，一直是个让人头疼的问题，本文向大家介绍四种解决DIV高度自适应方法，希望对你的学习有所帮助。</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2010-08-26 14:18:25</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=DIV" class="split-left-m usehover">DIV</a><a target="_blank" href="https://so./?keywords=%E9%AB%98%E5%BA%A6" class="split-left-m usehover">高度</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/222001.html" target="_blank" class="usehover article-irl-ct_title">CSS布局<em>自适应</em><em>高度</em>解决<em>方法</em></a> <!----> <!----></div> <a href="https://www./article/222001.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">本文向大家介绍一下CSS布局自适应高度解决方法，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，这里介绍一种特殊的方法。</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2010-08-26 16:27:46</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=CSS" class="split-left-m usehover">CSS</a><a target="_blank" href="https://so./?keywords=%E9%AB%98%E5%BA%A6" class="split-left-m usehover">高度</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/134133.html" target="_blank" class="usehover article-irl-ct_title">Servlet<em>方法</em>中<em>的</em><em>常用</em><em>五大</em><em>方法</em>浅析</a> <!----> <!----></div> <a href="https://www./article/134133.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">Servlet方法有很多，但是本篇向你介绍的五大Servlet方法是功能非常强大的，在Web开发中作用不小。是不是很感兴趣呢？</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2009-07-06 13:18:35</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=Servlet%E6%96%B9%E6%B3%95" class="split-left-m usehover">Servlet方法</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/225428.html" target="_blank" class="usehover article-irl-ct_title"><em>DIV</em>嵌套时外层无法<em>自适应</em><em>高度</em>三种解决方案</a> <!----> <!----></div> <a href="https://www./article/225428.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">相信很多朋友在使用CSS+DIV过程中都会遇到如何解决DIV嵌套时外层（父层）无法自适应高度这个问题，特别是目前的浏览器版本越来越多，更新的也非常快，对CSS的支持和要求越来越高.</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2010-09-10 12:59:33</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=DIV%E5%B5%8C%E5%A5%97" class="split-left-m usehover">DIV嵌套</a><a target="_blank" href="https://so./?keywords=CSS" class="split-left-m usehover">CSS</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><div class="article-irl-img usehover"><a href="https://www./article/774816.html" target="_blank"><img src="https://s4./oss/202311/28/9175f7f08fa42c4eaff28967060a127742f67d.jpg?x-oss-process=image/resize,m_fixed,w_142,h_82" alt></a></div> <div class="article-irl-c split-left-l"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/774816.html" target="_blank" class="usehover article-irl-ct_title">深入探索Python itertools库<em>的</em><em>五大</em><em>常用</em><em>方法</em></a> <!----> <!----></div> <a href="https://www./article/774816.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">Python的itertools库提供了许多强大的工具，用于处理迭代器和循环。本文将介绍Pythonitertools库中最常用的五个方法，并通过生动的代码示例、输出和解析来帮助您更好地理解和应用这些方法。让我们一起深入探索吧！</a></div> <div class="article-irl-cb"><p class="article-irl-cb_time">2023-11-28 11:22:51</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=Python" class="split-left-m usehover">Python</a><a target="_blank" href="https://so./?keywords=itertools%E5%BA%93" class="split-left-m usehover">itertools库</a><a target="_blank" href="https://so./?keywords=%E5%B7%A5%E5%85%B7" class="split-left-m usehover">工具</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/225247.html" target="_blank" class="usehover article-irl-ct_title"><em>DIV</em>+CSS<em>五大</em>特点新手须知</a> <!----> <!----></div> <a href="https://www./article/225247.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">DIV是标签，CSS是层叠样式表(CSS样式)，DIV+CSS高级布局已逐渐流行，这里向大家描述一下DIV+CSS页面布局的五大特点，相信你一定会感兴趣。</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2010-09-09 16:43:35</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=DIV%2BCSS" class="split-left-m usehover">DIV+CSS</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/222284.html" target="_blank" class="usehover article-irl-ct_title"><em>DIV</em>+CSS网页布局<em>的</em><em>五大</em>特点</a> <!----> <!----></div> <a href="https://www./article/222284.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">DIV+CSS是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,本文向大家介绍一下DIV+CSS的五大特点。</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2010-08-27 17:41:03</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=DIV%2BCSS" class="split-left-m usehover">DIV+CSS</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/221429.html" target="_blank" class="usehover article-irl-ct_title"><em>DIV</em>+CSS网页布局<em>五大</em>特点</a> <!----> <!----></div> <a href="https://www./article/221429.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">本文向大家介绍一下DIV+CSS网页布局五大特点，DIV+CSS是网站标准中常用的术语之一，，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别。</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2010-08-24 13:01:13</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=DIV%2BCSS" class="split-left-m usehover">DIV+CSS</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/222578.html" target="_blank" class="usehover article-irl-ct_title"><em>DIV</em>+CSS网页布局<em>五大</em>误区</a> <!----> <!----></div> <a href="https://www./article/222578.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">“DIV+CSS网页重构”的春风吹遍大江南北，互联网一时间风声鹤唳，但是DIV+CSS网页布局也存在着一些误区，这和大家分享一下。</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2010-08-30 14:57:21</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=DIV%2BCSS" class="split-left-m usehover">DIV+CSS</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><div class="article-irl-img usehover"><a href="https://www./article/597491.html" target="_blank"><img src="https://s5./oss/201906/05/7b028dafcf0017ec0996e426fa3766d3.png?x-oss-process=image/resize,m_fixed,w_142,h_82" alt></a></div> <div class="article-irl-c split-left-l"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/597491.html" target="_blank" class="usehover article-irl-ct_title">苹果<em>的</em><em>五大</em>系统、<em>五大</em>支柱</a> <!----> <!----></div> <a href="https://www./article/597491.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">北京时间2019年6月4日凌晨10点，在圣何塞市中心的McEneryConventionCenter，苹果WWDC2019全球开发者大会最值得关注的Keynote环节正式开幕。</a></div> <div class="article-irl-cb"><p class="article-irl-cb_time">2019-06-04 10:40:07</p> <!----></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/640673.html" target="_blank" class="usehover article-irl-ct_title"><em>五大</em><em>常用</em>数据科学Python库</a> <!----> <!----></div> <a href="https://www./article/640673.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">处理数据的过程消耗了人们在日常工作中的大量时间，而且我也经历过。我不仅处理过数值数据，还处理过文本数据，这需要大量的预处理，可以通过nltk、textblob和pyldavis等库来帮助。</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2021-01-13 15:13:07</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=Python" class="split-left-m usehover">Python</a><a target="_blank" href="https://so./?keywords=%E5%BC%80%E5%8F%91" class="split-left-m usehover">开发</a><a target="_blank" href="https://so./?keywords=+%E5%B7%A5%E5%85%B7" class="split-left-m usehover"> 工具</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/221865.html" target="_blank" class="usehover article-irl-ct_title">CSS textarea<em>高度</em><em>自适应</em>问题解决方案</a> <!----> <!----></div> <a href="https://www./article/221865.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">本文向大家介绍一下CSStextarea高度自适应问题解决方法，用CSS控制textarea文本域的高度随内容的变化而变化,不出现滚动条。</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2010-08-26 10:56:16</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=CSS" class="split-left-m usehover">CSS</a><a target="_blank" href="https://so./?keywords=textarea" class="split-left-m usehover">textarea</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/261745.html" target="_blank" class="usehover article-irl-ct_title"><em>五大</em><em>方法</em> 保护你<em>的</em>移动数据</a> <!----> <!----></div> <a href="https://www./article/261745.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">Juniper网络公司的最近一项调查显示，40%的员工正使用自己的移动设备来处理个人或商业事务，其中80%的人承认他们未经允许就访问了所在公司的网络。</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2011-05-16 10:30:02</p> <!----></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl article-irl_border"><!----> <div class="article-irl-c"><div class="title-box"><div class="article-irl-ct"><a href="https://server./article/479280.html" target="_blank" class="usehover article-irl-ct_title">数据中心优化<em>五大</em><em>方法</em></a> <!----> <!----></div> <a href="https://server./article/479280.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">数据中心的专业人士再次寻找新的办法来使自己的基础设施更加高效，打造新一代绿色数据中心大势所趋，无论是内容传输，数据分发或只是整体业务支持，对于当今蓬勃发展的业务数据中心是绝对至关重要的。</a></div> <div class="article-irl-cb_fixed"><p class="article-irl-cb_time">2015-06-10 14:28:34</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%BF%83" class="split-left-m usehover">数据中心</a><a target="_blank" href="https://so./?keywords=%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%BF%83%E4%BC%98%E5%8C%96" class="split-left-m usehover">数据中心优化</a></div></div></div></div> <!----></div><div class="article-articleitem article-ir articleItem"><div class="article-irl"><div class="article-irl-img usehover"><a href="https://www./article/622928.html" target="_blank"><img src="https://s5./oss/202008/04/6750d01b223613ea8d026fb40609557a.jpeg?x-oss-process=image/resize,m_fixed,w_142,h_82" alt></a></div> <div class="article-irl-c split-left-l"><div class="title-box"><div class="article-irl-ct"><a href="https://www./article/622928.html" target="_blank" class="usehover article-irl-ct_title">泣血整理，Jupyter Notebook最<em>常用</em><em>的</em><em>五大</em>配置技巧</a> <!----> <!----></div> <a href="https://www./article/622928.html" target="_blank" class="split-top-m usehover pc-three-line article-abstract">本文不是来介绍Jupyter的那些神奇用法，而是想实实在在地为Jupyter初学者解决一些头疼的问题。</a></div> <div class="article-irl-cb"><p class="article-irl-cb_time">2020-08-04 06:51:28</p> <div class="article-irl-cb_sign"><a target="_blank" href="https://so./?keywords=Jupyter" class="split-left-m usehover">Jupyter</a><a target="_blank" href="https://so./?keywords=python" class="split-left-m usehover">python</a><a target="_blank" href="https://so./?keywords=%E5%BC%80%E5%8F%91" class="split-left-m usehover">开发</a></div></div></div></div> <!----></div></div></section></div> <aside class="article-right"><!----><div class="advert"><div data-src="https://gg./www/delivery/ajs.php?zoneid=1301&cb=1708446890&v=article_right_corner" class="advert-wrap article_right_corner"></div></div><!----><!----><!----><!----> <div class="follow-topic"><h3>相似话题</h3> <div class="follow-topic-list"><div class="follow-topic-item"><a href="https://www./backend" target="_blank" class="follow-topic-title"><i class="ctoicon ctoa-"></i> <div>后端</div></a> <a href="https://www./backend" target="_blank" class="follow-topic-nums"><span>25876内容</span></a></div><div class="follow-topic-item"><a href="https://www./tool" target="_blank" class="follow-topic-title"><i class="ctoicon ctoa-"></i> <div>开发工具</div></a> <a href="https://www./tool" target="_blank" class="follow-topic-nums"><span>7174内容</span></a></div><div class="follow-topic-item"><a href="https://www./test" target="_blank" class="follow-topic-title"><i class="ctoicon ctoa-"></i> <div>测试</div></a> <a href="https://www./test" target="_blank" class="follow-topic-nums"><span>482内容</span></a></div><div class="follow-topic-item"><a href="https://www./game" target="_blank" class="follow-topic-title"><i class="ctoicon ctoa-"></i> <div>游戏开发</div></a> <a href="https://www./game" target="_blank" class="follow-topic-nums"><span>648内容</span></a></div></div> <a href="https://www./topic" target="_blank" class="see-more"><span>全部话题</span> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACT0lEQVRIDZWUPYgTQRTHdzdR0yjRTgOKnViIvVYiooLIieTwQCLkC05UhAPRwlJETpRrjnwiEkSDqETwLARB0FoQwVIRsZOIEDxDEn9vbyZkc5O5zEDy3tv5z++9Nzuzfrlcvul53oUgCK7kcrmX+Nbhqg+gzQ8Gg739fr9ZKpUOW+lrk076APgTWYdNYFr1en3/Gsf876qXDhZ833+jcNu73e5KrVbbZcaHT530QbFY7MZisTMk+aigu3u93kqj0dhmSuKqlw68bDb7h9ZPkuSbxPgHOp3O82azuVni8eGiDxMIgMp+Aj5Okl8S4x9pt9sPsL7E42Na/TCBAFj0BXOKJH8lBn6uUqncEd80ptFHEgikUCh8EDBuX2L8BY7vZfFNYyP9ugQCobIXdHFpBHiPTs6OxBHXpjfur17Nrb1FB9dVvMppO8Ztf6fnx61Jb+xAL6T9G3TyUMVbOL5Les5kTXprAqr3+Q01JLN2bNLHTJXoZ6lU6jb+vIpli+ZarVZ4V7Rm1Jr0w+pGheLzUi9S0TXxKXyAOW/b/0l6Y8u8rBngT4GGBfApv5rP5+9LMtOw6dd1UK1WDwF5xE/P3bXBN9JHOuBC7WM73lP9DqkU/zHwObVF8igyptHrKj3EOwG91nBIb5PJZMYCn0ofJuD7vxXQK+B7VImfsDPpdPpfpGQVuOjjVL6JC/QM+EG1/nsikTiRyWR+m+Cu+jiQReBHBUYXbYzAf0g8YTjp40BnSSCsVY7jac765wng8LGrPmDBMiu/Ap+1XSSd1FX/H7GkjBB3TDEJAAAAAElFTkSuQmCC" alt></a></div> <div class="hot-article"><h3>同话题下的热门内容</h3> <div class="hot-article-list"><a href="https://www./article/781338.html" target="_blank" class="hot-article-item">六个好用的Python库，绝对是瑰宝!</a><a href="https://www./article/781330.html" target="_blank" class="hot-article-item">2024，开发通用软件正在发生的八大变化！</a><a href="https://www./article/781503.html" target="_blank" class="hot-article-item">2024 年 2 月 TIOBE 指数：最流行的十种编程语言</a><a href="https://www./article/781449.html" target="_blank" class="hot-article-item">1.5亿行代码变更背后：代码质量下降，谁来背锅？</a><a href="https://www./article/781311.html" target="_blank" class="hot-article-item">为React开发人员释放ChatGPT的开发力量</a><a href="https://www./article/781446.html" target="_blank" class="hot-article-item">面试官：如何实现10亿数据判重？</a><a href="https://www./article/781501.html" target="_blank" class="hot-article-item">孰优孰劣，详细比较Python、Julia、Rust</a><a href="https://www./article/781341.html" target="_blank" class="hot-article-item">字节跳动最热门的 15 个前端开源项目</a></div></div> <!----> <div class="relevant-topic"><h3><span>相关专题</span> <a href="https://www./specials" target="_blank">更多</a></h3> <a href="https://cloud./act/nzpxresult/2023" target="_blank" class="first-topic"><div class="first-topic-cover"><img src="https://s4./oss/202312/28/f529d3086dfcd0886d4232861fd628895d0c7d.jpg" alt="2023年第十八届中国企业年终评选榜单公布！"></div> <div class="first-topic-title">2023年第十八届中国企业年终评选榜单公布！</div></a> <div class="relevant-topic-list"><a href="https://www./act/juniper/2023" target="_blank" class="relevant-topic-item"><div class="relevant-topic-cover"><img src="https://s7./oss/202312/18/66b0d62436766e8f3f73393dd90f4715098679.jpg" alt="网络运维智能化？瞻博网络有奇招！"></div> <div class="relevant-topic-info"><div class="relevant-topic-title">网络运维智能化？瞻博网络有奇招！</div> <div class="relevant-topic-time">2023-12-18 11:43:34</div></div></a><a href="https://ai./act/intel/20231103" target="_blank" class="relevant-topic-item"><div class="relevant-topic-cover"><img src="https://s3./oss/202311/06/e7015571023c8ed2f8a97781ede0cf871147ab.jpg" alt="Intel 黑客松竞赛火热进行中！"></div> <div class="relevant-topic-info"><div class="relevant-topic-title">Intel 黑客松竞赛火热进行中！</div> <div class="relevant-topic-time">2023-11-06 12:00:56</div></div></a></div></div> <div class="my-follow-btn">我收藏的内容</div> <div class="components-topic-edit edit articleStyle"><a href="https://www./editor.html#article"><img src="https://s5-media./cms/static/img/edit.jpg" alt></a></div> <div id="postionSet" class="toppostion"></div></aside> <div class="left-window"><div class="window-item zan"><img src="https://s5-media./cms/client/img/zanpc10.eeddee9.png" alt="点赞"> <img src="https://s5-media./cms/client/img/zanhover.6138b44.png" alt class="unhover"></div> <div class="window-item collect"><img src="https://s5-media./cms/client/img/collect.6dfb91c.png" alt="收藏"> <img src="https://s5-media./cms/client/img/collecthover.2ffcc8f.png" alt class="unhover"></div> <div class="window-item share" style="display:;"><img src="https://s5-media./cms/client/img/share.ca08f33.png" alt="分享"> <div class="share-div" style="display:none;"><div class="share-item"><i class="ctoicon ctoweibo1"></i> <span>微博</span></div> <div class="share-item"><i class="ctoicon ctoqq"></i> <span>QQ</span></div> <div class="share-item wxshare"><i class="ctoicon ctoweixin1"></i> <span>微信</span></div> <div class="share-item"><i class="ctoicon ctoURL"></i> <span>复制链接</span></div> <div class="wxshare-div"><div id="qrcodediv"></div> <p>微信扫码分享</p></div></div></div></div> <!----></div></section> <footer id="footerSet" class="components-common-footer footer"><div class="total-footer"><div class="top-set"><div class="left-work"><h3 class="common-h3">业务</h3> <ul class="nav-link"><li><div class="name-type">媒体</div> <a href="https://www./" target="_blank"></a><a href="https://www.cioage.com/" target="_blank">CIOAge</a><a href="https://www.hc3i.cn/" target="_blank">HC3i</a><a href="https://www./techplur" target="_blank">Techplur</a></li><li><div class="name-type">社区</div> <a href="https://blog./" target="_blank">博客</a><a href="https://edu./rk/" target="_blank">软考资讯</a><a href="https://ost./" target="_blank">鸿蒙开发者社区</a></li><li><div class="name-type">教育</div> <a href="https://edu./" target="_blank">学堂</a><a href="https://e./?utm_platform=pc&utm_medium=51cto&utm_source=zhuzhan&utm_content=sy_topbar&rtm_frd=4" target="_blank">精培</a><a href="https://b./index?utm_source=hometop" target="_blank">企业培训</a><a href="https://x./act/cto/camp" target="_blank">CTO训练营</a></li></ul> <div><ul class="tr_task" style="display:none;"><li><img src="https://static1./www/images/ewm_8.jpg" alt> <span>学堂</span></li> <li><img src="https://static1./www/images/ewm_qy.png" alt> <span>学堂企业版</span></li> <i class="kuai"></i></ul> <ul class="tr_task_weixin" style="display:none;"><li><img src="https://static1./www/images/ewm_3.jpeg" alt> <span>官微</span></li> <li><img src="https://static1./www/images/ewm_4.jpeg" alt> <span></span></li> <i class="kuai"></i></ul> <div class="tr_foot"><i class="ctoicon ctoweixin"></i> <a href="https://weibo.com/51cto001?is_all=1" target="_blank" rel="noopener noreferrer"><i class="ctoicon ctoweibo"></i></a> <span><i class="ctoicon ctoapp"></i></span></div></div></div> <div class="middle"><h3 class="common-h3">关于我们&条款</h3> <div class="about"><div><ul class="detail-link"><li><a href="https://www./about/about_home.html" target="_blank">关于我们</a></li> <li><a href="https://www./about/map.html" target="_blank">站点地图</a></li> <li><a href="https://www./about/history2020.html" target="_blank">网站大事</a></li> <li><a href="https://www./about/aboutus.html#feedback" target="_blank">意见反馈</a></li> <li><a href="https://www./about/aboutus_e.html" target="_blank">English</a></li> <li><a href="https://edu./center/other/service" target="_blank">用户协议</a></li> <li><a href="https://edu./center/other" target="_blank">隐私协议</a></li></ul></div> <div class="address"><p> 北京市海淀区中关村南1条甲1号ECO中科爱克大厦6-7层 </p> <p> 北京市公安局海淀分局备案编号：110108002980号 <br>营业执照 <a href="https://beian.miit.gov.cn/" target="_blank" class="record-number">京ICP备09067568号</a></p> <p> Copyright © 2005-2024 .COM 京ICP证060544 版权所有 未经许可 请勿转载 </p> <div class="address_img"><a href="https://image./images/51cto-icp.jpg" target="_blank"><img src="https://s7./wyfs02/M02/73/FD/wKiom1YLhe6Rz4cRAAAXp7l7roQ463.jpg" alt></a></div></div></div></div> <div class="right-link"><h3 class="common-h3">友情链接</h3> <div class="links clearfix"><a href="https://tech.sina.com.cn/" target="_blank">新浪科技</a><a href="https://tech.qq.com/" target="_blank">腾讯科技</a><a href="https://tech.163.com/" target="_blank">网易科技</a><a href="https://tech.ifeng.com/" target="_blank">凤凰科技</a><a href="https://www.mydrivers.com/" target="_blank">驱动科技</a><a href="https://www.techwalker.com/" target="_blank">科技行者</a><a href="http://www.techweb.com.cn/" target="_blank">TechWeb</a><a href="https://www.iresearch.cn/" target="_blank">艾瑞网</a><a href="http://www.chinaz.com/" target="_blank">站长之家</a><a href="https://www.sootoo.com/" target="_blank">速途网</a><a href="http://www.cet.com.cn/" target="_blank">中国经济新闻网</a><a href="https://www.ithome.com/" target="_blank">IT之家</a><a href="http://www.iitime.com.cn/" target="_blank">工联网</a><a href="https://www.geekpark.net/" target="_blank">极客公园</a><a href="https://www.263.net/" target="_blank">236视频会议</a><a href="http://www.idcquan.com/" target="_blank">中国IDC圈</a><a href="http://www.d1net.com/" target="_blank">企业网D1Net</a><a href="https://www.pedaily.cn/" target="_blank">投资界</a><a href="https://metafun-space.com/" target="_blank">次方元</a><a href="https://www.volcengine.com/" target="_blank">火山引擎</a></div></div></div></div></footer> <section class="suspension-pendant_r"><div class="erweima-title" style="display:none;"><img src="https://s5-media./cms/static/img/erweima.png" alt=""> <p>技术栈公众号</p></div> <div class="erweima-box"><p>技术栈公众号</p> <img src="https://s5-media./cms/static/img/video.jpg" alt=""></div></section> <div class="components-common-suspension po_top"><div class="cbbfixed"><span class="business"> 业务 <br>速览 </span> <span class="line"></span> <div class="customer_service js_customer zhiCustomBtn" style="height: 36px;"><i class="ctoicon ctokefu"></i> <div class="tooltip_set js_tooltip">在线客服</div></div> <span class="line"></span> <i class="ctoicon ctoxiangshang"></i></div> <div class="cbb_con"><div><div class="title-li">媒体</div> <a href="https://www./" target="_blank"></a> <a href="https://www.cioage.com/" target="_blank">CIOAge</a> <a href="https://www.hc3i.cn/" target="_blank">HC3i</a></div> <div><div class="title-li">社区</div> <a href="https://blog./" target="_blank">博客</a> <a href="https://ost./" target="_blank">鸿蒙开发者社区</a></div> <div><div class="title-li">教育</div> <a href="https://edu./" target="_blank">学堂</a> <a href="https://e./?utm_platform=pc&utm_medium=51cto&utm_source=zhuzhan&utm_content=sy_topbar&rtm_frd=4" target="_blank">精培</a> <a href="https://b./index?utm_source=hometop" target="_blank">企业培训</a> <a href="https://x./act/cto/camp" target="_blank">CTO训练营</a></div></div></div> <!----> <!----></div></div></div><script>window.__CTOWEB__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av){return {layout:"default",data:[{baseInfo:{article_id:221495,title:"五大常用Div高度自适应的方法",author:"admin",author_user_id:c,pubdate:"2010-08-24 16:03:22",abstract:"本文向大家介绍一下5种常用Div高度自适应的方法，主要包括背景图填充，采用脚本控制列的高度，采用负的外边界和内补丁相结合，采用负的左右边界和相对定位五种。",editor:"佚名",source:"div-css.net",source_url:a,article_type:[],topics:[{parent_topic_id:c,topic_id:b,name:l,name_en:"developer",url:G},{name_en:"frontend",name:H,topic_id:e,parent_topic_id:b,url:"https:\u002F\u002Fwww.\u002Ffrontend"}],keywords:[{name:"Div",url:"https:\u002F\u002Fso.\u002F?keywords=Div"},{name:m,url:n}],content:"\u003CP\u003E你对Div高度自适应的方法是否了解，这里和大家分享一下5种常用Div高度自适应的方法，希望对你的学习有所帮助。\u003C\u002FP\u003E\r\n\u003CP\u003E\u003CSTRONG\u003E5种常用Div高度自适应的方法\u003C\u002FSTRONG\u003E\u003C\u002FP\u003E\r\n\u003CP\u003E\u003CSTRONG\u003E1.背景图填充\u003C\u002FSTRONG\u003E\u003C\u002FP\u003E\r\n\u003CP\u003E这是使用最广泛的一种做法，无hacks，推荐使用：\u003C\u002FP\u003E\r\n\u003CP\u003ESourceCodetoRun\u003C\u002FP\u003E\u003CPRE\u003E\u003COL class=dp-xml\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\u003CSPAN\u003E\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-strict.dtd\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Ehtmlxmlns\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ehtmlxmlns\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"http:\u002F\u002Fwww.w3.org\u002F1999\u002Fxhtml\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ehead\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Emetahttp-equiv\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Emetahttp-equiv\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\"Content-Type\"\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003Econtent\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\"text\u002Fhtml;\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Echarset\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003Eutf\u003C\u002FSPAN\u003E\u003CSPAN\u003E-8\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u002F>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Etitle\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003EEqualheight(列高度相同的方法)\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Etitle\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Estyletype\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Estyletype\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"text\u002Fcss\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ebody{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Epadding:0; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Emargin:0; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Efont-size:12px; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Efont-family:Arial,Helvetica,sans-serif; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eline-height:140%; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ebackground:#E7DFD3; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E#middle{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ewidth:580px; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Efloat:left; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ebackground:#FFFFFF; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Etext-align:left; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E#header,#footer{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ebackground:#E8E8E8; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ewidth:750px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Etext-align:center; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#sideleft{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ewidth:580px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Efloat:left; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eposition:relative; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Emargin-left:-580px; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#sideright{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ewidth:170px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Efloat:right; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eposition:relative; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Emargin:0-170px00; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ebackground:#F0F0F0; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E#footer{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eclear:both; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eh1,h2,address,p{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Emargin:0; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Epadding:.8em; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eh1,h2{font-size:20px;} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Estyle\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Escripttype\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Escripttype\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"text\u002Fjavascript\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\u002F\u002F\u003C\u002FSPAN\u003E\u003CSPAN class=cdata\u003E\u003C![CDATA[ \u003C\u002Fspan\u003E \u003CLI\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\u003CSPAN class=cdata\u003EfunctiontoggleContent(name,n){ \u003C\u002FSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E\u003CSPAN class=cdata\u003Evari,t='',el=document.getElementById(name); \u003C\u002FSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\u003CSPAN class=cdata\u003Eif(!el.origCont)el.origCont=el.innerHTML; \u003C\u002FSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\u003CSPAN class=cdata\u003Efor(i=0;i\u003CN;I++)T+=EL.ORIGCONT; span \u003C\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E\u003CSPAN class=cdata\u003Eel.innerHTML=t; \u003C\u002FSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\u003CSPAN class=cdata\u003E} \u003C\u002FSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\u003CSPAN class=cdata\u003E\u002F\u002F]]>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Escript\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ehead\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ebody\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"header\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Eh1\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003EHead\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Eh1\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"middle\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"sideright\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"sideleft\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Eh2\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003Esideleft\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Eh2\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E默认长度加长页面\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择， \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E同时又无须做出设计上的牺牲。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E像素是计算机屏幕上的不可缩放的点，而一个 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eh3就是一个字大小的方块。由于字体大小的变化，h3 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E代表用户喜欢的文字大小的相对单位。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E采用印刷式的固定设计方案或许要容易些， \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E就可以充分利用电脑的显示器和浏览器。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E也许你想你的网站以某种特定的方式显示， \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E从而对网站的成功造成损害。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E要从固定的、基于像素的设计方法转到弹性的、 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E相对的设计方法并不容易。但是如果恰当利用， \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Eh2\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003Esideright\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Eh2\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E要从固定的、基于像素的设计方法转到弹性的、 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E相对的设计方法并不容易。但是如果恰当利用， \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E就可以成为增强亲和力和易用性的一个自然选择， \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E同时又无须做出设计上的牺牲。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E像素是计算机屏幕上的不可缩放的点，而一个 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eh3就是一个字大小的方块。由于字体大小的变化，h3 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E代表用户喜欢的文字大小的相对单位。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E则考虑的东西就相对较少。 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"footer\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003EFooter \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Eaddress\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E制作：Yzci.Com\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ebody\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ehtml\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003C\u002FLI\u003E\u003C\u002FOL\u003E\u003C\u002FPRE\u003E\r\n\u003CP\u003E [可先修改部分代码再运行查看效果]#p#\u003C\u002FP\u003E\r\n\u003CP\u003E\u003CSTRONG\u003E2.采用脚本控制列的高度（一）\u003C\u002FSTRONG\u003E\u003C\u002FP\u003E\r\n\u003CP\u003E需要事先知道哪列的高度，以此为基准用脚本控制。\u003CBR\u003Edocument.getElementById(\"sideleft\").style.height=document.getElementById(\"sideright\").scrollHeight+\"px\"\u003CBR\u003E上面的代码是以sideright的基准高度来控制sideleft的高度。\u003C\u002FP\u003E\r\n\u003CP\u003E代码简单，但比较被动：\u003CBR\u003ESourceCodetoRun \u003C\u002FP\u003E\u003CPRE\u003E\u003COL class=dp-xml\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\u003CSPAN\u003E\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-strict.dtd\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Ehtmlxmlns\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ehtmlxmlns\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"http:\u002F\u002Fwww.w3.org\u002F1999\u002Fxhtml\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ehead\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Emetahttp-equiv\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Emetahttp-equiv\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\"Content-Type\"\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=attribute-value\u003Econtent\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\"text\u002Fhtml;\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Echarset\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003Eutf\u003C\u002FSPAN\u003E\u003CSPAN\u003E-8\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u002F>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Etitle\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003EEqualheight(使用JS实现列高度相同的方法)\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Etitle\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Estyletype\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Estyletype\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"text\u002Fcss\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ebody{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Epadding:0; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Emargin:0; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Efont-size:12px; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Efont-family:Arial,Helvetica,sans-serif; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eline-height:140%; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Etext-align:center; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ebackground:#E7DFD3; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#wrap{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ewidth:750px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Emargin:0auto; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\u002F*overflow:hidden;*\u002F \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E#header{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ebackground:#E8E8E8; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#sideleft{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ewidth:580px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Efloat:left; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ebackground:#FFF; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Etext-align:left; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#sideright{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ewidth:170px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Efloat:left; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ebackground:#F0F0F0; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Etext-align:left; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#footer{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ebackground:#E8E8E8; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ewidth:100%; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Efloat:left; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eh1,h2,address,p{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Emargin:0; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Epadding:.8em; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eh1,h2{font-size:20px;} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Estyle\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ehead\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ebody\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"wrap\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"header\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Eh1\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003EHead\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Eh1\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"sideleft\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Eh2\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003Esideleft\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Eh2\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E像素是计算机屏幕上的不可缩放的点，而一个 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eh3就是一个字大小的方块。由于字体大小的变化，h3 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E代表用户喜欢的文字大小的相对单位。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E像素是计算机屏幕上的不可缩放的点，而一个 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eh3就是一个字大小的方块。由于字体大小的变化，h3 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E代表用户喜欢的文字大小的相对单位。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"sideright\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Eh2\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003Esideright\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Eh2\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E像素是计算机屏幕上的不可缩放的点，而一个 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eh3就是一个字大小的方块。由于字体大小的变化，h3 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E代表用户喜欢的文字大小的相对单位。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Escripttype\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Escripttype\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"text\u002Fjavascript\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Edocument.getElementById(\"sideleft\")\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003E.style.height\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003Edocument\u003C\u002FSPAN\u003E\u003CSPAN\u003E.getElementById(\"sideright\").scrollHeight+\"px\" \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Escript\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"footer\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003EFooter \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Eaddress\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E制作：Yzci.Com\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ebody\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ehtml\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003C\u002FLI\u003E\u003C\u002FOL\u003E\u003C\u002FPRE\u003E\r\n\u003CP\u003E [可先修改部分代码再运行查看效果]#p#\u003C\u002FP\u003E\r\n\u003CP\u003E\u003CSTRONG\u003E3.采用脚本控制列的高度（二）\u003C\u002FSTRONG\u003E\u003C\u002FP\u003E\r\n\u003CP\u003E不需要事先知道哪列的高度，脚本自动判断。\u003CBR\u003E代码较复杂，有点延时：\u003C\u002FP\u003E\r\n\u003CP\u003ESourceCodetoRun \u003C\u002FP\u003E\u003CPRE\u003E\u003COL class=dp-xml\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\u003CSPAN\u003E\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-transitional.dtd\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Ehtmlxmlns\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ehtmlxmlns\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\"http:\u002F\u002Fwww.w3.org\u002F1999\u002Fxhtml\"xml\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003E:lang\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\"en\"lang=\"en\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ehead\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Etitle\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E脚本控制三行三列自适应高度DIV布局\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Etitle\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Escriptsrc\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Escriptsrc\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\"..\u002Fjs\u002FeqCols.js\"\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003Etype\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\"text\u002Fjavascript\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Escript\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Estyletype\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Estyletype\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"text\u002Fcss\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ebody{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Efont-size:75%; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Efont-family:Verdana,Geneva,Arial,Helvetica,sans-serif; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eline-height:100%; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Emargin:5px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Epadding:0px; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#header,#mid,#footer{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ewidth:760px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Emargin:0pxauto; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Epadding:0px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E#header{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ebackground:#F4F4F4; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eheight:60px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Emargin-bottom:5px; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eh3,h5{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Epadding-top:25px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ecolor:#708090; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Etext-align:center; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Emargin:0; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#fbox{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ebackground:#F1F1F1; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ewidth:195px; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Efloat:left; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E#mbox{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ebackground:#DFF7FF; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Emargin:0px5px0px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Epadding:0px; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Efloat:left; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ewidth:360px; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#sbox{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ebackground:#FFEBCC; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ewidth:195px; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Efloat:right; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ep{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Emargin:0px; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Epadding:10px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Etext-indent:2em; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eline-height:130%; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E#footer{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ebackground:#CDDBED; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eborder-top:solid5px#FFFFFF; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Etext-align:center; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eheight:60px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eclear:both; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Estyle\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ehead\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Ebodyonload\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ebodyonload\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"P7_equalCols('fbox','mbox','sbox')\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"header\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Eh3\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E脚本控制三行三列自适应高度DIV布局\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Eh3\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"mid\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"fbox\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E但是有视力障碍-你我变老时就会成为他们的一员。 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E但是有视力障碍-你我变老时就会成为他们的一员。 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"mbox\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E但是有视力障碍-你我变老时就会成为他们的一员。 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E因为InternetExplorer改变文字大小的方式与别的浏览器不同。 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003EMozilla和Opera可以缩放已经设定像素大小的文字，而Windows下的IE却不能。 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E但是有视力障碍-你我变老时就会成为他们的一员。 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E因为InternetExplorer改变文字大小的方式与别的浏览器不同。Mozilla和Opera可以缩放\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E已经设定像素大小的文字，\u003C\u002FSPAN\u003E\u003CSPAN\u003E而Windows下的IE却不能。 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"sbox\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E但是有视力障碍-你我变老时就会成为他们的一员。 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"footer\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Eh5\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E制作：Yzci.Com\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Eh5\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ebody\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ehtml\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003C\u002FLI\u003E\u003C\u002FOL\u003E\u003C\u002FPRE\u003E\r\n\u003CP\u003E [可先修改部分代码再运行查看效果]#p#\u003C\u002FP\u003E\r\n\u003CP\u003E\u003CSTRONG\u003E4.采用负的外边界和内补丁相结合\u003C\u002FSTRONG\u003E\u003C\u002FP\u003E\r\n\u003CP\u003E不需要事先知道哪列的高度。\u003C\u002FP\u003E\r\n\u003CP\u003Ehacks比较多（主要是opera的），但容易使用，推荐：\u003C\u002FP\u003E\r\n\u003CP\u003ESourceCodetoRun \u003C\u002FP\u003E\u003CPRE\u003E\u003COL class=dp-xml\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\u003CSPAN\u003E\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-strict.dtd\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Ehtmlxmlns\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ehtmlxmlns\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"http:\u002F\u002Fwww.w3.org\u002F1999\u002Fxhtml\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ehead\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Emetahttp-equiv\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Emetahttp-equiv\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\"Content-Type\"\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003Econtent\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\"text\u002Fhtml;\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Echarset\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003Eutf\u003C\u002FSPAN\u003E\u003CSPAN\u003E-8\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u002F>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Etitle\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003EEqualheight(DIV+CSS布局中自适应高度的解决方法)\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Etitle\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Estyletype\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Estyletype\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"text\u002Fcss\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ebody{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Epadding:0; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Emargin:0; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Efont-size:12px; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Efont-family:Arial,Helvetica,sans-serif; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eline-height:140%; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Etext-align:center; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ebackground:#E7DFD3; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#wrap{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ewidth:750px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Emargin:0auto; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eoverflow:hidden; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E#header{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ebackground:#E8E8E8; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#sideleft{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ewidth:580px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Efloat:left; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ebackground:#FFF; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Etext-align:left; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#sideright{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ewidth:170px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Efloat:left; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ebackground:#F0F0F0; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Etext-align:left; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E\u002F*easyclearing*\u002F \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E#wrap:after \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Econtent:'[DONOTLEAVEITISNOTREAL]'; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Edisplay:block; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eheight:0; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eclear:both; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Evisibility:hidden; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E#wrap \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Edisplay:inline-block; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\u002F*\\*\u002F \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#wrap \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Edisplay:block; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E\u002F*endeasyclearing*\u002F \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\u002F*\\*\u002F \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#sideleft,#sideright \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Epadding-bottom:32767px!important; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Emargin-bottom:-32767px!important; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E@mediaalland(min-width:0px){ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#sideleft,#sideright \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Epadding-bottom:0!important; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Emargin-bottom:0!important; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E#sideleft:before,#sideright:before \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Econtent:'[DONOTLEAVEITISNOTREAL]'; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Edisplay:block; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ebackground:inherit; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Epadding-top:32767px!important; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Emargin-bottom:-32767px!important; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eheight:0; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\u002F**\u002F \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E#footer{ \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Ebackground:#E8E8E8; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ewidth:100%; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Efloat:left; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eh1,h2,address,p{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Emargin:0; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Epadding:.8em; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eh1,h2{font-size:20px;} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Estyle\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ehead\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ebody\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"wrap\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"header\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Eh1\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003EHead\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Eh1\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"sideleft\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Eh2\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003Esideleft\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Eh2\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E像素是计算机屏幕上的不可缩放的点，而一个 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eh3就是一个字大小的方块。由于字体大小的变化，h3 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E代表用户喜欢的文字大小的相对单位。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E像素是计算机屏幕上的不可缩放的点，而一个 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Eh3就是一个字大小的方块。由于字体大小的变化，h3 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E代表用户喜欢的文字大小的相对单位。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"sideright\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Eh2\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003Esideright\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Eh2\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E像素是计算机屏幕上的不可缩放的点，而一个 \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eh3就是一个字大小的方块。由于字体大小的变化，h3 \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E代表用户喜欢的文字大小的相对单位。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。\u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"footer\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003EFooter \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Eaddress\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E制作：Yzci.Com\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ep\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ebody\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ehtml\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003C\u002FLI\u003E\u003C\u002FOL\u003E\u003C\u002FPRE\u003E\r\n\u003CP\u003E [可先修改部分代码再运行查看效果]#p#\u003C\u002FP\u003E\r\n\u003CP\u003E\u003CSTRONG\u003E5.采用负的左右边界和相对定位\u003C\u002FSTRONG\u003E\u003C\u002FP\u003E\r\n\u003CP\u003E下面的例子能较好地解决列高度相同的问题。\u003CBR\u003E三行二列布局，主要内容在左边，网页宽度750px,左列580px,右列170px。\u003CBR\u003ECSS代码：\u003CBR\u003EExampleSourceCode \u003C\u002FP\u003E\u003CPRE\u003E\u003COL class=dp-xml\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E\u003CSPAN\u003E#middle{ \u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ewidth:580px; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Efloat:left; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ebackground:#FFFFFF; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Etext-align:left; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E#sideleft{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ewidth:580px; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Efloat:left; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eposition:relative; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Emargin-left:-580px; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E#sideright{ \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ewidth:170px; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Efloat:right; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Eposition:relative; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Emargin:0-170px00; \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003Ebackground:#F0F0F0; \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E} \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003Exhtml代码： \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN\u003EExampleSourceCode \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"middle\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"sideright\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E<\u003C\u002FSPAN\u003E\u003CSPAN class=attribute\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN class=tag-name\u003Edivid\u003C\u002FSPAN\u003E\u003CSPAN\u003E=\u003C\u002FSPAN\u003E\u003CSPAN class=attribute-value\u003E\"sideleft\"\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI\u003E\u003CSPAN class=tag\u003E\u003C\u002F\u003C span\u003E\u003CSPAN class=tag-name\u003Ediv\u003C\u002FSPAN\u003E\u003CSPAN class=tag\u003E>\u003C\u002FSPAN\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003CLI class=alt\u003E\u003CSPAN\u003E \u003C\u002FSPAN\u003E\u003C\u002FLI\u003E\u003C\u002FOL\u003E\u003C\u002FPRE\u003E\r\n\u003CP\u003E 从结构看，middle（使用的是左列希望的背景色）在最外面，宽度等于sideleft的宽度，往里一层是sideright，其宽度为170px,浮动方向是右边。但其右面的边界是负的170px，相当于将sideright拉向右面（右面紧贴着middle的右边）170px的位置。而sideleft又是套在sideright里面的，其内容先于sideright出来，左边界是负的580，相当于在sideright左边580px，此时sideleft和middle位置重合。\u003C\u002FP\u003E\r\n\u003CP\u003E◆优点：不需要背景图片，无hacks，完全的自适应高度。\u003C\u002FP\u003E\r\n\u003CP\u003E◆缺点：现在的代码只能左对齐。\u003C\u002FP\u003E\r\n\u003CP\u003E文章来源:Div-Css.net设计网参考:http:\u002F\u002Fwww.div-css.net\u002Fdiv_css\u002Ftopic\u002Findex.asp?id=7124\u003C\u002FP\u003E\r\n\u003CP\u003E【编辑推荐】\u003C\u002FP\u003E\r\n\u003COL\u003E\r\n\u003CLI\u003E\u003CA href=\"http:\u002F\u002Fdeveloper.\u002Fart\u002F201008\u002F221486.htm\" target=_blank\u003EDIV CSS网页布局开发参考规范\u003C\u002FA\u003E\u003C\u002FLI\u003E\r\n\u003CLI\u003E\u003CA href=\"http:\u002F\u002Fdeveloper.\u002Fart\u002F201008\u002F221258.htm\" target=_blank\u003EIE6.0对padding的解读分析\u003C\u002FA\u003E\u003C\u002FLI\u003E\r\n\u003CLI\u003E\u003CA href=\"http:\u002F\u002Fdeveloper.\u002Fart\u002F201008\u002F221413.htm\" target=_blank\u003EDIV+CSS网页错位诊断和解决方法\u003C\u002FA\u003E\u003C\u002FLI\u003E\r\n\u003CLI\u003E\u003CA href=\"http:\u002F\u002Fdeveloper.\u002Fart\u002F201008\u002F221488.htm\" target=_blank\u003EFloat构建三栏DIV CSS网页布局\u003C\u002FA\u003E\u003C\u002FLI\u003E\r\n\u003CLI\u003E\u003CA href=\"http:\u002F\u002Fdeveloper.\u002Fart\u002F201008\u002F221430.htm\" target=_blank\u003E技术分享 如何使用CSS控制超链接文字样式\u003C\u002FA\u003E\u003C\u002FLI\u003E\u003C\u002FOL\u003E\r\n\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E\u003C\u002FSPAN\u003E",cover:a,article_status:b,is_old:o,content_type:[],factor_pub_date:I,factor_up_date:I,title_extension:"div高度自适应",editor_version:c,is_stop_sharing:d,factor_image_url:[a],parent_topic_id:b,advert_list:[{advert_name:"article_top_navigation",url:"https:\u002F\u002Fgg2.\u002Fwww\u002Fdelivery\u002Fajs.php?zoneid=1279&cb=1708446890"},{advert_name:"article_right_corner",url:"https:\u002F\u002Fgg.\u002Fwww\u002Fdelivery\u002Fajs.php?zoneid=1301&cb=1708446890"},{advert_name:"article_link_text_one",url:"https:\u002F\u002Fgg.\u002Fwww\u002Fdelivery\u002Fajs.php?zoneid=1295&cb=1708446890"},{advert_name:"article_link_text_two",url:"https:\u002F\u002Fgg3.\u002Fwww\u002Fdelivery\u002Fajs.php?zoneid=1302&cb=1708446890"},{advert_name:"article_link_text_three",url:a},{advert_name:"article_link_text_four",url:a}]},keywordsStr:"Div,高度",isError:d,new_specials:[{name:"2023年第十八届中国企业年终评选榜单公布！",url:"https:\u002F\u002Fcloud.\u002Fact\u002Fnzpxresult\u002F2023",cover:"https:\u002F\u002Fs4.\u002Foss\u002F202312\u002F28\u002Ff529d3086dfcd0886d4232861fd628895d0c7d.jpg",created_at:"2023-12-28 20:12:38"},{name:"网络运维智能化？瞻博网络有奇招！",url:"https:\u002F\u002Fwww.\u002Fact\u002Fjuniper\u002F2023",cover:"https:\u002F\u002Fs7.\u002Foss\u002F202312\u002F18\u002F66b0d62436766e8f3f73393dd90f4715098679.jpg",created_at:"2023-12-18 11:43:34"},{name:"Intel 黑客松竞赛火热进行中！",url:"https:\u002F\u002Fai.\u002Fact\u002Fintel\u002F20231103",cover:"https:\u002F\u002Fs3.\u002Foss\u002F202311\u002F06\u002Fe7015571023c8ed2f8a97781ede0cf871147ab.jpg",created_at:"2023-11-06 12:00:56"}],editor_recommend:[],hot_articles:[{article_id:J,title:"六个好用的Python库，绝对是瑰宝!",url:"https:\u002F\u002Fwww.\u002Farticle\u002F781338.html",topic:[{id:537179,article_id:J,parent_topic_id:b,topic_id:e,sort:b,topic_status:b}]},{article_id:z,title:"2024，开发通用软件正在发生的八大变化！",url:"https:\u002F\u002Fwww.\u002Farticle\u002F781330.html",topic:[{id:537169,article_id:z,parent_topic_id:b,topic_id:e,sort:b,topic_status:f},{id:537170,article_id:z,parent_topic_id:106,topic_id:c,sort:e,topic_status:f}]},{article_id:K,title:"2024 年 2 月 TIOBE 指数：最流行的十种编程语言",url:"https:\u002F\u002Fwww.\u002Farticle\u002F781503.html",topic:[{id:537463,article_id:K,parent_topic_id:b,topic_id:e,sort:b,topic_status:b}]},{article_id:A,title:"1.5亿行代码变更背后：代码质量下降，谁来背锅？",url:"https:\u002F\u002Fwww.\u002Farticle\u002F781449.html",topic:[{id:537368,article_id:A,parent_topic_id:b,topic_id:e,sort:b,topic_status:b},{id:537369,article_id:A,parent_topic_id:L,topic_id:c,sort:e,topic_status:b}]},{article_id:p,title:"为React开发人员释放ChatGPT的开发力量",url:"https:\u002F\u002Fwww.\u002Farticle\u002F781311.html",topic:[{id:537132,article_id:p,parent_topic_id:b,topic_id:e,sort:b,topic_status:b},{id:537133,article_id:p,parent_topic_id:M,topic_id:c,sort:e,topic_status:b},{id:537134,article_id:p,parent_topic_id:L,topic_id:c,sort:h,topic_status:b}]},{article_id:N,title:"面试官：如何实现10亿数据判重？",url:"https:\u002F\u002Fwww.\u002Farticle\u002F781446.html",topic:[{id:537364,article_id:N,parent_topic_id:b,topic_id:e,sort:b,topic_status:b}]},{article_id:O,title:"孰优孰劣，详细比较Python、Julia、Rust",url:"https:\u002F\u002Fwww.\u002Farticle\u002F781501.html",topic:[{id:537460,article_id:O,parent_topic_id:b,topic_id:e,sort:b,topic_status:b}]},{article_id:P,title:"字节跳动最热门的 15 个前端开源项目",url:"https:\u002F\u002Fwww.\u002Farticle\u002F781341.html",topic:[{id:537184,article_id:P,parent_topic_id:b,topic_id:e,sort:b,topic_status:b}]}],recommend_topic:[{topic_id:h,name:"后端",name_en:"backend",parent_id:b,sort:e,article_num:25876,pv_num:c,url:"https:\u002F\u002Fwww.\u002Fbackend",edu_cate_ids:"12,13,14,25,27,77,78,187,201,313",blog_cate_ids:"60",hm_cate_ids:"16,17,19,27"},{topic_id:j,name:"开发工具",name_en:"tool",parent_id:b,sort:h,article_num:7174,pv_num:c,url:"https:\u002F\u002Fwww.\u002Ftool",edu_cate_ids:"304",blog_cate_ids:a,hm_cate_ids:a},{topic_id:k,name:"测试",name_en:"test",parent_id:b,sort:g,article_num:482,pv_num:c,url:"https:\u002F\u002Fwww.\u002Ftest",edu_cate_ids:"133,242,243,246",blog_cate_ids:"19,96",hm_cate_ids:a},{topic_id:g,name:"游戏开发",name_en:"game",parent_id:b,sort:f,article_num:648,pv_num:c,url:"https:\u002F\u002Fwww.\u002Fgame",edu_cate_ids:"55,85,127",blog_cate_ids:"101,102,103,104,105,3",hm_cate_ids:a}],recommend_article:[{article_id:222383,abstract:"本文向大家描述一下几种DIV高度自适应方法，网站制站中，我们经常要把两个并排显示的div实现一样高的效果，即每列高度（事先并不能确定哪列的高度）的相同。",cover:a,title:"\u003Cem\u003EDIV\u003C\u002Fem\u003E\u003Cem\u003E高度\u003C\u002Fem\u003E\u003Cem\u003E自适应\u003C\u002Fem\u003E\u003Cem\u003E方法\u003C\u002Fem\u003E汇总",url:"https:\u002F\u002Fwww.\u002Farticle\u002F222383.html",pubdate:"2010-08-30 09:52:03",keyword:[{name:q,url:r},{name:Q,url:R}],article_type:[]},{article_id:222403,abstract:"DIV＋CSS设计俨然已成网页设计界的标准了,但有些小问题确实很棘手，例如令人头痛的“DIV自适应高度”问题。这里向大家介绍一下DIV只适应高度的写法。",cover:a,title:"\u003Cem\u003EDIV\u003C\u002Fem\u003E\u003Cem\u003E自适应\u003C\u002Fem\u003E\u003Cem\u003E高度\u003C\u002Fem\u003E写法简介",url:"https:\u002F\u002Fwww.\u002Farticle\u002F222403.html",pubdate:"2010-08-30 10:26:20",keyword:[{name:q,url:r},{name:"自适应高度",url:"https:\u002F\u002Fso.\u002F?keywords=%E8%87%AA%E9%80%82%E5%BA%94%E9%AB%98%E5%BA%A6"}],article_type:[]},{article_id:221626,abstract:"解决div列高度自适的方法有很多种，这里向大家介绍三种最常用的方法给大家，相信本文介绍一定会让你有所收获的。",cover:a,title:"CSS技巧：3种\u003Cem\u003E常用\u003C\u002Fem\u003E\u003Cem\u003E方法\u003C\u002Fem\u003E解决\u003Cem\u003Ediv\u003C\u002Fem\u003E列\u003Cem\u003E高度\u003C\u002Fem\u003E\u003Cem\u003E自适应\u003C\u002Fem\u003E",url:"https:\u002F\u002Fwww.\u002Farticle\u002F221626.html",pubdate:"2010-08-25 13:10:43",keyword:[{name:"div",url:"https:\u002F\u002Fso.\u002F?keywords=div"},{name:m,url:n},{name:s,url:t}],article_type:[]},{article_id:222361,abstract:"DIV高度自适应的问题你是否了解，本文向大家描述一下DIV高度自适应的三种有效解决方法，希望对你的学习有所帮助。",cover:a,title:"三种有效解决\u003Cem\u003EDIV\u003C\u002Fem\u003E\u003Cem\u003E高度\u003C\u002Fem\u003E\u003Cem\u003E自适应\u003C\u002Fem\u003E\u003Cem\u003E的\u003C\u002Fem\u003E\u003Cem\u003E方法\u003C\u002Fem\u003E",url:"https:\u002F\u002Fwww.\u002Farticle\u002F222361.html",pubdate:"2010-08-30 09:15:15",keyword:[{name:"DIV高度自适应",url:"https:\u002F\u002Fso.\u002F?keywords=DIV%E9%AB%98%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94"}],article_type:[]},{article_id:222367,abstract:"DIV高度自适应是个值得研究的问题，本文向大家介绍一些关于div高度自适应的技巧，希望对你的学习有所帮助，欢迎大家一起来学习。",cover:a,title:"\u003Cem\u003EDIV\u003C\u002Fem\u003E\u003Cem\u003E高度\u003C\u002Fem\u003E\u003Cem\u003E自适应\u003C\u002Fem\u003E及应该注意\u003Cem\u003E的\u003C\u002Fem\u003E问题",url:"https:\u002F\u002Fwww.\u002Farticle\u002F222367.html",pubdate:"2010-08-30 09:22:13",keyword:[{name:q,url:r},{name:Q,url:R}],article_type:[]},{article_id:221956,abstract:"关于DIV高度的自适应，一直是个让人头疼的问题，本文向大家介绍四种解决DIV高度自适应方法，希望对你的学习有所帮助。",cover:a,title:"四种\u003Cem\u003E方法\u003C\u002Fem\u003E解决\u003Cem\u003EDIV\u003C\u002Fem\u003E\u003Cem\u003E高度\u003C\u002Fem\u003E\u003Cem\u003E自适应\u003C\u002Fem\u003E问题",url:"https:\u002F\u002Fwww.\u002Farticle\u002F221956.html",pubdate:"2010-08-26 14:18:25",keyword:[{name:q,url:r},{name:m,url:n}],article_type:[]},{article_id:222001,abstract:"本文向大家介绍一下CSS布局自适应高度解决方法，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，这里介绍一种特殊的方法。",cover:a,title:"CSS布局\u003Cem\u003E自适应\u003C\u002Fem\u003E\u003Cem\u003E高度\u003C\u002Fem\u003E解决\u003Cem\u003E方法\u003C\u002Fem\u003E",url:"https:\u002F\u002Fwww.\u002Farticle\u002F222001.html",pubdate:"2010-08-26 16:27:46",keyword:[{name:s,url:t},{name:m,url:n}],article_type:[]},{article_id:134133,abstract:"Servlet方法有很多，但是本篇向你介绍的五大Servlet方法是功能非常强大的，在Web开发中作用不小。是不是很感兴趣呢？",cover:a,title:"Servlet\u003Cem\u003E方法\u003C\u002Fem\u003E中\u003Cem\u003E的\u003C\u002Fem\u003E\u003Cem\u003E常用\u003C\u002Fem\u003E\u003Cem\u003E五大\u003C\u002Fem\u003E\u003Cem\u003E方法\u003C\u002Fem\u003E浅析",url:"https:\u002F\u002Fwww.\u002Farticle\u002F134133.html",pubdate:"2009-07-06 13:18:35",keyword:[{name:"Servlet方法",url:"https:\u002F\u002Fso.\u002F?keywords=Servlet%E6%96%B9%E6%B3%95"}],article_type:[]},{article_id:225428,abstract:"相信很多朋友在使用CSS+DIV过程中都会遇到如何解决DIV嵌套时外层（父层）无法自适应高度这个问题，特别是目前的浏览器版本越来越多，更新的也非常快，对CSS的支持和要求越来越高.",cover:a,title:"\u003Cem\u003EDIV\u003C\u002Fem\u003E嵌套时外层无法\u003Cem\u003E自适应\u003C\u002Fem\u003E\u003Cem\u003E高度\u003C\u002Fem\u003E三种解决方案",url:"https:\u002F\u002Fwww.\u002Farticle\u002F225428.html",pubdate:"2010-09-10 12:59:33",keyword:[{name:"DIV嵌套",url:"https:\u002F\u002Fso.\u002F?keywords=DIV%E5%B5%8C%E5%A5%97"},{name:s,url:t}],article_type:[]},{article_id:774816,abstract:"Python的itertools库提供了许多强大的工具，用于处理迭代器和循环。本文将介绍Pythonitertools库中最常用的五个方法，并通过生动的代码示例、输出和解析来帮助您更好地理解和应用这些方法。让我们一起深入探索吧！",cover:"https:\u002F\u002Fs4.\u002Foss\u002F202311\u002F28\u002F9175f7f08fa42c4eaff28967060a127742f67d.jpg?x-oss-process=image\u002Fresize,m_fixed,w_142,h_82",title:"深入探索Python itertools库\u003Cem\u003E的\u003C\u002Fem\u003E\u003Cem\u003E五大\u003C\u002Fem\u003E\u003Cem\u003E常用\u003C\u002Fem\u003E\u003Cem\u003E方法\u003C\u002Fem\u003E",url:"https:\u002F\u002Fwww.\u002Farticle\u002F774816.html",pubdate:"2023-11-28 11:22:51",keyword:[{name:S,url:T},{name:"itertools库",url:"https:\u002F\u002Fso.\u002F?keywords=itertools%E5%BA%93"},{name:"工具",url:"https:\u002F\u002Fso.\u002F?keywords=%E5%B7%A5%E5%85%B7"}],article_type:[]},{article_id:225247,abstract:"DIV是标签，CSS是层叠样式表(CSS样式)，DIV+CSS高级布局已逐渐流行，这里向大家描述一下DIV+CSS页面布局的五大特点，相信你一定会感兴趣。",cover:a,title:"\u003Cem\u003EDIV\u003C\u002Fem\u003E+CSS\u003Cem\u003E五大\u003C\u002Fem\u003E特点新手须知",url:"https:\u002F\u002Fwww.\u002Farticle\u002F225247.html",pubdate:"2010-09-09 16:43:35",keyword:[{name:u,url:v}],article_type:[]},{article_id:222284,abstract:"DIV+CSS是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,本文向大家介绍一下DIV+CSS的五大特点。",cover:a,title:"\u003Cem\u003EDIV\u003C\u002Fem\u003E+CSS网页布局\u003Cem\u003E的\u003C\u002Fem\u003E\u003Cem\u003E五大\u003C\u002Fem\u003E特点",url:"https:\u002F\u002Fwww.\u002Farticle\u002F222284.html",pubdate:"2010-08-27 17:41:03",keyword:[{name:u,url:v}],article_type:[]},{article_id:221429,abstract:"本文向大家介绍一下DIV+CSS网页布局五大特点，DIV+CSS是网站标准中常用的术语之一，，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别。",cover:a,title:"\u003Cem\u003EDIV\u003C\u002Fem\u003E+CSS网页布局\u003Cem\u003E五大\u003C\u002Fem\u003E特点",url:"https:\u002F\u002Fwww.\u002Farticle\u002F221429.html",pubdate:"2010-08-24 13:01:13",keyword:[{name:u,url:v}],article_type:[]},{article_id:222578,abstract:"“DIV+CSS网页重构”的春风吹遍大江南北，互联网一时间风声鹤唳，但是DIV+CSS网页布局也存在着一些误区，这和大家分享一下。",cover:a,title:"\u003Cem\u003EDIV\u003C\u002Fem\u003E+CSS网页布局\u003Cem\u003E五大\u003C\u002Fem\u003E误区",url:"https:\u002F\u002Fwww.\u002Farticle\u002F222578.html",pubdate:"2010-08-30 14:57:21",keyword:[{name:u,url:v}],article_type:[]},{article_id:597491,abstract:"北京时间2019年6月4日凌晨10点，在圣何塞市中心的McEneryConventionCenter，苹果WWDC2019全球开发者大会最值得关注的Keynote环节正式开幕。",cover:"https:\u002F\u002Fs5.\u002Foss\u002F201906\u002F05\u002F7b028dafcf0017ec0996e426fa3766d3.png?x-oss-process=image\u002Fresize,m_fixed,w_142,h_82",title:"苹果\u003Cem\u003E的\u003C\u002Fem\u003E\u003Cem\u003E五大\u003C\u002Fem\u003E系统、\u003Cem\u003E五大\u003C\u002Fem\u003E支柱",url:"https:\u002F\u002Fwww.\u002Farticle\u002F597491.html",pubdate:"2019-06-04 10:40:07",keyword:[],article_type:[]},{article_id:640673,abstract:"处理数据的过程消耗了人们在日常工作中的大量时间，而且我也经历过。我不仅处理过数值数据，还处理过文本数据，这需要大量的预处理，可以通过nltk、textblob和pyldavis等库来帮助。",cover:a,title:"\u003Cem\u003E五大\u003C\u002Fem\u003E\u003Cem\u003E常用\u003C\u002Fem\u003E数据科学Python库",url:"https:\u002F\u002Fwww.\u002Farticle\u002F640673.html",pubdate:"2021-01-13 15:13:07",keyword:[{name:S,url:T},{name:l,url:U},{name:" 工具",url:"https:\u002F\u002Fso.\u002F?keywords=+%E5%B7%A5%E5%85%B7"}],article_type:[]},{article_id:221865,abstract:"本文向大家介绍一下CSStextarea高度自适应问题解决方法，用CSS控制textarea文本域的高度随内容的变化而变化,不出现滚动条。",cover:a,title:"CSS textarea\u003Cem\u003E高度\u003C\u002Fem\u003E\u003Cem\u003E自适应\u003C\u002Fem\u003E问题解决方案",url:"https:\u002F\u002Fwww.\u002Farticle\u002F221865.html",pubdate:"2010-08-26 10:56:16",keyword:[{name:s,url:t},{name:"textarea",url:"https:\u002F\u002Fso.\u002F?keywords=textarea"}],article_type:[]},{article_id:261745,abstract:"Juniper网络公司的最近一项调查显示，40%的员工正使用自己的移动设备来处理个人或商业事务，其中80%的人承认他们未经允许就访问了所在公司的网络。",cover:a,title:"\u003Cem\u003E五大\u003C\u002Fem\u003E\u003Cem\u003E方法\u003C\u002Fem\u003E 保护你\u003Cem\u003E的\u003C\u002Fem\u003E移动数据",url:"https:\u002F\u002Fwww.\u002Farticle\u002F261745.html",pubdate:"2011-05-16 10:30:02",keyword:[],article_type:[]},{article_id:479280,abstract:"数据中心的专业人士再次寻找新的办法来使自己的基础设施更加高效，打造新一代绿色数据中心大势所趋，无论是内容传输，数据分发或只是整体业务支持，对于当今蓬勃发展的业务数据中心是绝对至关重要的。",cover:a,title:"数据中心优化\u003Cem\u003E五大\u003C\u002Fem\u003E\u003Cem\u003E方法\u003C\u002Fem\u003E",url:"https:\u002F\u002Fserver.\u002Farticle\u002F479280.html",pubdate:"2015-06-10 14:28:34",keyword:[{name:"数据中心",url:"https:\u002F\u002Fso.\u002F?keywords=%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%BF%83"},{name:"数据中心优化",url:"https:\u002F\u002Fso.\u002F?keywords=%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%BF%83%E4%BC%98%E5%8C%96"}],article_type:[]},{article_id:622928,abstract:"本文不是来介绍Jupyter的那些神奇用法，而是想实实在在地为Jupyter初学者解决一些头疼的问题。",cover:"https:\u002F\u002Fs5.\u002Foss\u002F202008\u002F04\u002F6750d01b223613ea8d026fb40609557a.jpeg?x-oss-process=image\u002Fresize,m_fixed,w_142,h_82",title:"泣血整理，Jupyter Notebook最\u003Cem\u003E常用\u003C\u002Fem\u003E\u003Cem\u003E的\u003C\u002Fem\u003E\u003Cem\u003E五大\u003C\u002Fem\u003E配置技巧",url:"https:\u002F\u002Fwww.\u002Farticle\u002F622928.html",pubdate:"2020-08-04 06:51:28",keyword:[{name:"Jupyter",url:"https:\u002F\u002Fso.\u002F?keywords=Jupyter"},{name:"python",url:"https:\u002F\u002Fso.\u002F?keywords=python"},{name:l,url:U}],article_type:[]}]}],fetch:{},error:null,state:{config:{origin:V,baseURL:"https:\u002F\u002Fapi-media.",publicPath:"https:\u002F\u002Fs5-media.\u002Fcms\u002Fclient",staticPath:"https:\u002F\u002Fs5-media.\u002Fcms\u002Fstatic",HOME_URL:"https:\u002F\u002Fhome.",SPECIAL_URL:W,AD_URL:"https:\u002F\u002Fgg.\u002Fwww\u002Fdelivery\u002Fajs.php",topic:"www",eduURL:X,title:"技术成就梦想-中国知名的数字化人才学习平台和技术社区",aboutTitle:"技术成就梦想-中国知名的数字化人才学习平台和技术社区-.COM",NODE_ENV:"production",alife:"prod",des:B,keywords:"技术媒体,在线教育,视频课程,企业培训,鸿蒙社区,开发者社区,资讯,职场,技术博客,软考,认证考试,开发,编程语言,物联网,HarmonyOS,人工智能,大数据,国产化,软件开发,网络,系统,操作系统,运维,安全,存储,数据库,企业解决方案,华为",tdk:{developer:{title:"开发频道-.COM-中国知名的数字化人才学习平台和技术社区",des:"开发频道是IT开发技术领域的知名技术门户。主要内容包括架构设计、项目管理、编程语言、开发工具、大数据等多个领域，为广大IT专业技术人员提供丰富的技术文章及专题资源。开发频道用户涵盖程序员、架构师、项目经理和企业CTO等不同层次，在整个中国开发技术领域起到信息传播和服务的平台作用。",keywords:"Java,.NET,Web,HTML5,Python,Scala,JVM,C++,PHP,测试,软件测试,单元测试,架构,架构设计,项目管理,编程语言,大数据,NOSQL,设计,程序员"},mobile:{title:"移动开发-.COM-中国知名的数字化人才学习平台和技术社区",des:"移动开发频道，为智能手机和移动设备的应用开发者提供Android、iPhone、WindowsPhone、MeeGo、Ophone、Widget等多个移动平台的技术知识与资讯，融合移动开发领域的技术专家和厂商，提供技术趋势的方向性指引与行业发展分析。",keywords:"移动,应用开发,移动开发,移动应用运营,移动信息化"},os:{title:"系统频道-.COM-中国知名的数字化人才学习平台和技术社区",des:"系统频道为读者提供企业级Linux、Unix以及Windows系统管理相关的技术文章、专题与资讯，为入门者提供资料与指引，并对基于移动智能设备以及浏览器的下一代系统平台进行前瞻性的探讨。",keywords:"操作系统,OS,Linux,Unix,Windows,Mac,开源,移动OS,浏览器"},network:{title:"网络频道-网络技术专家-.COM-中国知名的数字化人才学习平台和技术社区",des:"网络频道主要提供网络技术、网络传输、网络性能提升、有线网络、无线网络、通信网络、网络管理、网络运维、网络可视化、网络优化、路由技术、交换网络等方面的技术文档和新闻资讯等专业服务。百余个网络技术专题，超过10万篇技术文章，让您轻松掌握整个IT网络技术领域的最新动向。",keywords:"路由器,交换机,统一通信,超融合,基础架构,云,数据中心,通信,无线,布线,5G,网络融合,网络优化,网络可视化,sdn,nfv,wifi,边缘计算,智能化,数字化转型,无线路由器,智能路由器,路由器设置,交换机设置,智能交换机,万兆以太网,软件定义网络,软件定义广域网,sd-wan,交换网,无线网络,无线网络设备,如何设置路由器,无线路由,综合布线,云计算,大数据,负载均衡,性能优化,流量分析,上网行为管理,网络协议,行业专网,操作系统,虚拟化,云数据中心,资源池"},netsecurity:{title:"网络安全频道-.COM-中国知名的数字化人才学习平台和技术社区",des:"安全频道是IT网络安全领域知名的门户频道。技术成就梦想，而源于专业，安全频道拥有百余个专业的安全技术专题，超过10万篇技术文章，涵盖了整个IT网络安全领域。",keywords:"网络安全,病毒,黑客,防火墙,攻击,勒索软件,防御,UTM,IDS\u002FIPS,ARP,DDoS,安全技术,APT,Sniffer,杀毒,杀毒软件,查杀,工控安全,漏洞,系统安全,数据安全,安全管理,密码,破解,补丁,防病毒,云安全,流氓软件,恶意软件,大数据安全,信息安全,虚拟化安全,网站安全,中毒,加密,解密,脚本攻击,网络钓鱼,蠕虫,木马,邮件安全,数据库安全,入侵检测,入侵防御,服务器安全,拒绝服务攻击,欺骗,VPN网关,反病毒,垃圾邮件,SSLVPN"},database:{title:"数据库频道-.COM-中国知名的数字化人才学习平台和技术社区",des:"数据库频道，为数据库工程师和管理人员提供数据库技术资讯，内容包括oracle\u002Fsqlserver\u002Fsybase\u002Fjava\u002Fmysql\u002Fasp.net\u002Fdb2数据库前沿技术，数据基础、数据库管理、数据库开发和数据库安全和培训等方面。",keywords:"数据库,sql数据库,oracle数据库,access数据库,数据库软件,数据库设计,数据库教程,数据库管理,开发,营销,培训"},contentCenter:{title:"内容中心-为技术人员提供优质内容和服务，赋能技术人员成长",des:Y,keywords:Z},editor:{title:"社区编辑-汇聚独到见解乐于分享的优秀技术人-.COM",des:B,keywords:_},personEditor:{title:"的个人主页-技术成就梦想-中国知名的数字化人才学习平台和技术社区-.COM",des:B,keywords:_},centerList:{title:"技术精选特刊-技术成就梦想-中国知名的数字化人才学习平台和技术社区-.COM",des:"技术精选特刊是内容中心为高级技术开发人员和企业管理人员特别推出的刊物。本刊将时刻关注编程、开源、大前端、大数据、云原生、物联网、人工智能、元宇宙等众多技术领域的演进与创新，为读者深度解读技术领域的变化与走向。",keywords:$},centerDetail:{title:"-技术成就梦想-中国知名的数字化人才学习平台和技术社区-.COM",des:"-刊物介绍。",keywords:$},author:{title:"内容中心编辑团队-前沿科技的传播者，数字化转型的记录者-.com",des:"内容中心编辑团队由二十余位资历深厚的编辑组成，秉持创新、深度、专业、多元的原则，以文章、视频、直播、沙龙等不同形式输出优质内容，话题涵盖人工智能、元宇宙、云原生、开源、架构、开发、安全等多个技术领域，旨在为各领域技术人员提供技术学习、技能提升、行业应用、资源整合等多方位的服务与支持；为转型中的企业提出全新视角，助力其把握数字经济发展机遇，抢占市场发展先机。",keywords:"内容中心编辑团队,内容中心,技术媒体,在线教育,视频课程,企业培训,鸿蒙社区,开发者社区,资讯,职场,技术博客,软考,认证考试,开发,编程语言,物联网,HarmonyOS,人工智能,大数据,国产化,软件开发,网络,系统,操作系统,运维,安全,存储,数据库,企业解决方案,华为"},videoList:{title:"-为技术人员提供优质内容和服务，赋能技术人员成长",des:Y,keywords:"视频,内容中心,技术媒体,在线教育,视频课程,企业培训,鸿蒙社区,开发者社区,资讯,职场,技术博客,软考,认证考试,开发,编程语言,物联网,HarmonyOS,人工智能,大数据,国产化,软件开发,网络,系统,操作系统,运维,安全,存储,数据库,企业解决方案,华为"},acticityList:{title:"活动-.COM-中国知名的数字化人才学习平台和技术社区",des:"活动专区,直播、线上活动、线下活动,为技术人员提供优质内容和服务，赋能技术人员成长",keywords:Z}},server_url:"https:\u002F\u002Fsc.\u002Fsa?project=production",oldurl:["other."]},token:"QVFCUlhnd0dDQWRWQ0ZZRUlHVjlHeVo3YWxkVlgxWQ",tokentime:1708449538,pcmobile:"pc",topData:{bannerList:[],hotList:[],courseList:[],trainList:[],lineList:{}},centerData:{recommend:[],wayTopic:[],wapSpecial:[],ctoInfo:[],weekArticles:[],hmArticles:{},blogArticles:[],blogEtp:[],enterpriseSchool:[],hmRecommend:[]},hotList:[],topicList:[{topic_id:a,name:"推荐",name_en:a,url:a}],page:b,page_size:50,limit_time:c,name_en:a,showMore:d,total_count:c,courseList:[],recommendData:[],liveData:[],footerHeight:c,postionShow:d,leftPostionShow:d,showBackground:d,ad:{adscript:{},navtop:d,navbottom:d,navbottomNew:d,headlinebottom:d,jing:d,articleFlag:d,topicThreeFlag:d},center:{journalList:[],journalListCount:c,journalView:{},isFirstReqList:o,JournalListPC:[],journalListCountPC:c,firstJournal:{},journalId:c,factor_up_date:a,centerTopic:[{name:"精选",id:c},{name:aa,id:M},{name:ab,id:118},{name:"云原生",id:75},{name:ac,id:104},{name:"架构",id:w},{name:ad,id:51},{name:ae,id:af},{name:l,id:b},{name:C,id:120}]},nav:{topnavData:[{navId:b,parentNavId:c,title:"首页",navUrl:V,iconUrl:a,navSort:b,childDetail:[],isshow:d},{navId:e,parentNavId:c,title:ag,navUrl:"https:\u002F\u002Fwww.\u002Fdev?utm_source=hometop",iconUrl:a,navSort:e,childDetail:[],isshow:d},{navId:h,parentNavId:c,title:"博客",navUrl:D,iconUrl:a,navSort:h,childDetail:[],isshow:d},{navId:g,parentNavId:c,title:"学堂",navUrl:"https:\u002F\u002Fedu.\u002F?utm_source=hometop",iconUrl:a,navSort:g,childDetail:[{navId:af,parentNavId:g,title:ah,navUrl:ai,iconUrl:a,navSort:b},{navId:aj,parentNavId:g,title:"免费课程",navUrl:"https:\u002F\u002Fedu.\u002Fcourselist\u002Findex-zh5.html?utm_source=hometop",iconUrl:a,navSort:e},{navId:ak,parentNavId:g,title:"课程排行",navUrl:"https:\u002F\u002Fedu.\u002Franking\u002Findex.html?utm_source=hometop",iconUrl:a,navSort:h},{navId:13,parentNavId:g,title:"直播课",navUrl:"https:\u002F\u002Fe.\u002Fncamp\u002Flist?utm_platform=pc&utm_medium=51cto&utm_source=zhuzhan&utm_content=sy_topbar&rtm_frd=13",iconUrl:a,navSort:g},{navId:14,parentNavId:g,title:"软考学堂",navUrl:"https:\u002F\u002Fe.\u002Frk\u002F?utm_platform=pc&utm_medi-um=51cto&utm_source=zhuzhan&utm_content=sy_topbar&rtm_frd=14",iconUrl:a,navSort:f}],isshow:d},{navId:f,parentNavId:c,title:"精品班",navUrl:"https:\u002F\u002Fe.\u002F?utm_platform=pc&utm_medi-um=51cto&utm_source=zhuzhan&utm_content=sy_topbar",iconUrl:"https:\u002F\u002Fs2.\u002Foss\u002F202312\u002F22\u002Fd63741682abe5437c1859125feed3088debd88.png",navSort:f,childDetail:[{navId:15,parentNavId:f,title:"全部课程",navUrl:"https:\u002F\u002Fe.\u002Fwejob\u002Flist?utm_platform=pc&utm_medi-um=51cto&utm_source=zhuzhan&utm_content=sy_topbar",iconUrl:a,navSort:b},{navId:16,parentNavId:f,title:"厂商认证",navUrl:"https:\u002F\u002Fe.\u002Fwejob\u002Flist?pid=5&utm_platform=pc&utm_medium=51cto&utm_source=zhuzhan&utm_content=sy_topbar&rtm_frd=41",iconUrl:a,navSort:e},{navId:17,parentNavId:f,title:"IT技术",navUrl:"https:\u002F\u002Fe.\u002Fwejob\u002Flist?pid=1&utm_platform=pc&utm_medium=51cto&utm_source=zhuzhan&utm_content=sy_topbar&rtm_frd=42",iconUrl:a,navSort:h},{navId:18,parentNavId:f,title:"2024年软考",navUrl:"https:\u002F\u002Fe.\u002Frk\u002F?utm_platform=pc&utm_medium=51cto&utm_source=zhuzhan&utm_content=sy_xyzq_rightwzl&rtm_frd=07&utm_medium=51cto&utm_source=zhuzhan&utm_content=sy_topbar&rtm_frd=43",iconUrl:a,navSort:g},{navId:19,parentNavId:f,title:"PMP项目管理",navUrl:"https:\u002F\u002Fe.\u002Fwejob\u002Flist?pid=33&utm_platform=pc&utm_medium=51cto&utm_source=zhuzhan&utm_content=sy_topbar&rtm_frd=44",iconUrl:a,navSort:f},{navId:32,parentNavId:f,title:al,navUrl:am,iconUrl:a,navSort:j}],isshow:d},{navId:33,parentNavId:c,title:"直播训练营",navUrl:"https:\u002F\u002Fedu.\u002Fsurl=o0bwJ2",iconUrl:a,navSort:j,childDetail:[],isshow:d},{navId:j,parentNavId:c,title:an,navUrl:E,iconUrl:a,navSort:k,childDetail:[{navId:20,parentNavId:j,title:"在线学习",navUrl:E,iconUrl:a,navSort:b}],isshow:d},{navId:k,parentNavId:c,title:x,navUrl:ao,iconUrl:a,navSort:w,childDetail:[{navId:28,parentNavId:k,title:x,navUrl:ao,iconUrl:a,navSort:b},{navId:29,parentNavId:k,title:"技术经理研习营",navUrl:"https:\u002F\u002Fx.\u002Fact\u002Fcto\u002Ftl",iconUrl:a,navSort:e},{navId:30,parentNavId:k,title:"LeaTech峰会",navUrl:"https:\u002F\u002Fx.\u002Fact\u002Fcto\u002Fleatech2021?www1",iconUrl:a,navSort:h}],isshow:d},{navId:i,parentNavId:c,title:y,navUrl:"https:\u002F\u002Fost.\u002F?utm_source=hometop",iconUrl:a,navSort:i,childDetail:[{navId:22,parentNavId:i,title:"文章",navUrl:"https:\u002F\u002Fost.\u002Fpostlist",iconUrl:a,navSort:b},{navId:23,parentNavId:i,title:"资源",navUrl:"https:\u002F\u002Fost.\u002Fresource",iconUrl:a,navSort:e},{navId:24,parentNavId:i,title:"问答",navUrl:"https:\u002F\u002Fost.\u002Fanswerlist",iconUrl:a,navSort:h},{navId:25,parentNavId:i,title:"课堂",navUrl:"https:\u002F\u002Fost.\u002Fstudy",iconUrl:a,navSort:g},{navId:26,parentNavId:i,title:"专栏",navUrl:"https:\u002F\u002Fost.\u002Fcolumn",iconUrl:a,navSort:f},{navId:27,parentNavId:i,title:ap,navUrl:"https:\u002F\u002Fost.\u002Factivity",iconUrl:a,navSort:j}],isshow:d},{navId:F,parentNavId:c,title:"WOT全球技术创新大会",navUrl:"https:\u002F\u002F\u002Fwot\u002F?utm_source=dhl",iconUrl:a,navSort:F,childDetail:[],isshow:d}],weChatQRcode:[{navId:b,navType:b,navName:aq,imageUrl:"https:\u002F\u002Fs5.\u002Foss\u002F202302\u002F07\u002F862966771f540df82857144db74b27ee5b4b23.jpeg",navSort:b},{navId:e,navType:b,navName:y,imageUrl:"https:\u002F\u002Fs4.\u002Foss\u002F202302\u002F07\u002Fd53d67c771f5cc42bac359bceb138c4cb1713b.jpg",navSort:e},{navId:h,navType:b,navName:"技术栈",imageUrl:"https:\u002F\u002Fs6.\u002Foss\u002F202302\u002F07\u002F58786f9973e5e929ef521783e1ee40413b04de.jpeg",navSort:h},{navId:g,navType:b,navName:"官微",imageUrl:"https:\u002F\u002Fs3.\u002Foss\u002F202302\u002F07\u002Fc77c03983d48589b1af789dfc284acb6a7c529.jpeg",navSort:g},{navId:f,navType:b,navName:ar,imageUrl:"https:\u002F\u002Fs4.\u002Foss\u002F202302\u002F07\u002F544d71641d983430fc9955636e625e6bb21ff9.jpeg",navSort:f},{navId:j,navType:b,navName:as,imageUrl:"https:\u002F\u002Fs3.\u002Foss\u002F202302\u002F07\u002Ff1bd61e720bf669483d941a8486c124f32c451.jpeg",navSort:j},{navId:k,navType:b,navName:x,imageUrl:"https:\u002F\u002Fs9.\u002Foss\u002F202302\u002F07\u002F4719e7b27bae3af5e33552481b6cb913288b01.jpeg",navSort:k},{navId:w,navType:b,navName:"鸿蒙开发者社区订阅号",imageUrl:"https:\u002F\u002Fs5.\u002Foss\u002F202302\u002F07\u002F61a991f484307eed2fe9356cc215c4d8f2dc0f.jpg",navSort:w},{navId:ak,navType:b,navName:"题库小程序",imageUrl:"https:\u002F\u002Fs9.\u002Foss\u002F202312\u002F22\u002Fd14a8af27ec180578e0921bf0322374996d667.jpeg",navSort:i}],appQRcodeData:[{navId:i,navType:e,navName:"学堂APP",imageUrl:"https:\u002F\u002Fs8.\u002Foss\u002F202302\u002F07\u002F24febb8152cc24e264e642f8cb8bb515efea26.jpeg",navSort:b},{navId:F,navType:e,navName:"学堂企业版APP",imageUrl:"https:\u002F\u002Fs9.\u002Foss\u002F202302\u002F07\u002F43cca7d0489cc5d1f70060be760bde17d552e2.jpeg",navSort:e},{navId:aj,navType:e,navName:"鸿蒙开发者社区视频号",imageUrl:"https:\u002F\u002Fs5.\u002Foss\u002F202302\u002F07\u002Fc4d2220826890472539671d7c428f0c0ee9451.jpg",navSort:h}],showclass:a},route:{isHost:d,isHostForIndex:d,topic:void 0,firstTopic:a,page:b,type:a,showHtml:d},secondnav:{navList:[{name:ag,has_url:b,has_list:b,url:"https:\u002F\u002Fwww.\u002Fdev",list:[{name:l,url:G},{name:aa,url:"https:\u002F\u002Fwww.\u002Fai"},{name:"云计算",url:"https:\u002F\u002Fwww.\u002Fcloud"},{name:ac,url:"https:\u002F\u002Fwww.\u002Fopensource"},{name:ad,url:"https:\u002F\u002Fwww.\u002Fbigdata"},{name:"网络",url:"https:\u002F\u002Fwww.\u002Fnetwork"},{name:ae,url:"https:\u002F\u002Fwww.\u002Fnetsecurity"},{name:"系统",url:"https:\u002F\u002Fwww.\u002Fos"},{name:"数据库",url:"https:\u002F\u002Fwww.\u002Fdatabase"},{name:"物联网",url:"https:\u002F\u002Fwww.\u002Fiot"},{name:"移动开发",url:"https:\u002F\u002Fwww.\u002Fmobile"},{name:"运维",url:"https:\u002F\u002Fwww.\u002Foperation"},{name:"服务器",url:"https:\u002F\u002Fserver."},{name:"存储",url:"https:\u002F\u002Fwww.\u002Fstor"},{name:"商务办公",url:"https:\u002F\u002Fwww.\u002Fbiz"},{name:"新闻",url:"https:\u002F\u002Fwww.\u002Fnews"},{name:"区块链",url:"https:\u002F\u002Fwww.\u002Fblockchain"},{name:ab,url:"https:\u002F\u002Fwww.\u002Fmetaverse"},{name:at,url:"https:\u002F\u002Fwww.cioage.com"},{name:"数字化转型",url:"https:\u002F\u002Fwww.\u002Fdigital"},{name:"原创",url:"https:\u002F\u002Fwww.\u002Foriginal"},{name:"译文",url:"https:\u002F\u002Fwww.\u002Ftranslation"},{name:"专题",url:W},{name:"企业动态",url:"https:\u002F\u002Fwww.\u002Fbusiness"},{name:C,url:au}]},{name:"技术博客",has_url:b,has_list:c,url:D,list:[]},{name:"课程",has_url:b,has_list:c,url:"http:\u002F\u002Fedu.\u002F?jydh",list:[]},{name:ap,has_url:b,has_list:c,url:"https:\u002F\u002Fzhibo.?utm_source=shouye",list:[]},{name:"活动",has_url:b,has_list:c,url:"https:\u002F\u002Fwww.\u002Factivity",list:[]},{name:ah,has_url:b,has_list:c,url:ai,list:[]},{name:y,has_url:b,has_list:c,url:"https:\u002F\u002Fost.#zzsy",list:[]},{name:"企业学习",has_url:b,has_list:c,url:"https:\u002F\u002Fb.?utm_source=home_sub_menu",list:[]}]},shence:{is_channel:o,first_channel:l,second_channel:H},sitemap:{workList:[{name:"媒体",list:[{name:aq,url:"https:\u002F\u002Fwww.\u002F"},{name:at,url:"https:\u002F\u002Fwww.cioage.com\u002F"},{name:"HC3i",url:"https:\u002F\u002Fwww.hc3i.cn\u002F"},{name:C,url:au}]},{name:"社区",list:[{name:as,url:D},{name:al,url:am},{name:y,url:"https:\u002F\u002Fost.\u002F"}]},{name:"教育",list:[{name:ar,url:X},{name:"精培",url:"https:\u002F\u002Fe.\u002F?utm_platform=pc&utm_medium=51cto&utm_source=zhuzhan&utm_content=sy_topbar&rtm_frd=4"},{name:an,url:E},{name:x,url:"https:\u002F\u002Fx.\u002Fact\u002Fcto\u002Fcamp"}]}],linkList:[{name:"新浪科技",url:"https:\u002F\u002Ftech.sina.com.cn\u002F"},{name:"腾讯科技",url:"https:\u002F\u002Ftech.qq.com\u002F"},{name:"网易科技",url:"https:\u002F\u002Ftech.163.com\u002F"},{name:"凤凰科技",url:"https:\u002F\u002Ftech.ifeng.com\u002F"},{name:"驱动科技",url:"https:\u002F\u002Fwww.mydrivers.com\u002F"},{name:"科技行者",url:"https:\u002F\u002Fwww.techwalker.com\u002F"},{name:"TechWeb",url:"http:\u002F\u002Fwww.techweb.com.cn\u002F"},{name:"艾瑞网",url:"https:\u002F\u002Fwww.iresearch.cn\u002F"},{name:"站长之家",url:"http:\u002F\u002Fwww.chinaz.com\u002F"},{name:"速途网",url:"https:\u002F\u002Fwww.sootoo.com\u002F"},{name:"中国经济新闻网",url:"http:\u002F\u002Fwww.cet.com.cn\u002F"},{name:"IT之家",url:"https:\u002F\u002Fwww.ithome.com\u002F"},{name:"工联网",url:"http:\u002F\u002Fwww.iitime.com.cn\u002F"},{name:"极客公园",url:"https:\u002F\u002Fwww.geekpark.net\u002F"},{name:"236视频会议",url:"https:\u002F\u002Fwww.263.net\u002F"},{name:"中国IDC圈",url:"http:\u002F\u002Fwww.idcquan.com\u002F"},{name:"企业网D1Net",url:"http:\u002F\u002Fwww.d1net.com\u002F"},{name:"投资界",url:"https:\u002F\u002Fwww.pedaily.cn\u002F"},{name:"次方元",url:"https:\u002F\u002Fmetafun-space.com\u002F"},{name:"火山引擎",url:"https:\u002F\u002Fwww.volcengine.com\u002F"}]},topiclist:{topicList:[],total_count:c},user:{islogin:d,user_id:a,avatar:a,nickname:a}},serverRendered:o,routePath:"\u002Farticle\u002F221495.html",config:{_app:{basePath:av,assetsPath:av,cdnURL:"https:\u002F\u002Fs5-media.\u002Fcms\u002Fclient\u002F"}}}}("",1,0,false,2,5,4,3,9,6,7,"开发","高度","https:\u002F\u002Fso.\u002F?keywords=%E9%AB%98%E5%BA%A6",true,781311,"DIV","https:\u002F\u002Fso.\u002F?keywords=DIV","CSS","https:\u002F\u002Fso.\u002F?keywords=CSS","DIV+CSS","https:\u002F\u002Fso.\u002F?keywords=DIV%2BCSS",8,"CTO训练营","鸿蒙开发者社区",781330,781449,"是中国知名的数字化人才学习平台和技术社区，以服务一亿数字化人才职业成长为己任，对中国数千万数字化人才拥有强大的影响力和服务能力。通过技术社区、技术博客和新媒体矩阵等综合产品服务体系，凝聚了2000万+IT技术人员、50万+位技术博主和近千家IT公司的CTO；通过丰富且高质量的IT技术在线教育资源，完整覆盖就业培训、在职提升、认证考试等职业教育领域，分别打造企业培训、个人提升创新产品矩阵，服务IT人才成长。同时，作为华为鸿蒙操作系统合作伙伴，承担了鸿蒙官方技术社区的运营，全力服务于鸿蒙开发者生态。","Techplur","https:\u002F\u002Fblog.\u002F","https:\u002F\u002Fb.\u002Findex?utm_source=hometop",10,"https:\u002F\u002Fwww.\u002Fdeveloper","前端","2010-08-24T16:03:22",781338,781503,107,59,781446,781501,781341,"高度自适应","https:\u002F\u002Fso.\u002F?keywords=%E9%AB%98%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94","Python","https:\u002F\u002Fso.\u002F?keywords=Python","https:\u002F\u002Fso.\u002F?keywords=%E5%BC%80%E5%8F%91","https:\u002F\u002Fwww.","https:\u002F\u002Fwww.\u002Fspecials","https:\u002F\u002Fedu.\u002F","内容中心是优质技术内容的创造和运营平台，始终保持敏锐的技术洞察力，探索IT技术发展趋势，聚焦前沿技术应用场景落地，秉持创新、深度、专业、多元的原则，内容覆盖主流技术方向，以文章、视频、直播、沙龙、大会等不同形式，为技术人员提供优质内容和服务，赋能全球技术人员成长","内容中心,技术媒体,在线教育,视频课程,企业培训,鸿蒙社区,开发者社区,资讯,职场,技术博客,软考,认证考试,开发,编程语言,物联网,HarmonyOS,人工智能,大数据,国产化,软件开发,网络,系统,操作系统,运维,安全,存储,数据库,企业解决方案,华为","技术编辑,编辑,技术媒体,在线教育,视频课程,企业培训,鸿蒙社区,开发者社区,资讯,职场,技术博客,软考,认证考试,开发,编程语言,物联网,HarmonyOS,人工智能,大数据,国产化,软件开发,网络,系统,操作系统,运维,安全,存储,数据库,企业解决方案,华为","技术精选,技术特刊,技术媒体,在线教育,视频课程,企业培训,鸿蒙社区,开发者社区,资讯,职场,技术博客,软考,认证考试,开发,编程语言,物联网,HarmonyOS,人工智能,大数据,国产化,软件开发,网络,系统,操作系统,运维,安全,存储,数据库,企业解决方案,华为","人工智能","元宇宙","开源","大数据","安全",31,"内容精选","短视频","https:\u002F\u002Fedu.\u002Fvideolist\u002Findex.html?utm_platform=pc&utm_medium=51cto&utm_source=zhuzhan&utm_content=dh",11,12,"软考资讯","https:\u002F\u002Fedu.\u002Frk\u002F","企业培训","https:\u002F\u002Fx.\u002F?www","直播","","学堂","博客","CIOAge","https:\u002F\u002Fwww.\u002Ftechplur","\u002F"));</script><script src="https://s5-media./cms/client/53a96fb.js" defer></script><script src="https://s5-media./cms/client/46fe5d7.js" defer></script><script src="https://s5-media./cms/client/d8ad24d.js" defer></script><script src="https://s5-media./cms/client/54fc689.js" defer></script><script src="https://s5-media./cms/client/818d14a.js" defer></script><script src="https://s5-media./cms/client/eb7e622.js" defer></script><script src="https://s5-media./cms/client/7e899c2.js" defer></script><script src="https://s5-media./cms/client/3e17d1c.js" defer></script><script src="https://s5-media./cms/client/5b725ae.js" defer></script><script src="https://s5-media./cms/client/4f15cc7.js" defer></script><script src="https://s5-media./cms/client/3a03453.js" defer></script><script src="https://s5-media./cms/client/960d524.js" defer></script><script src="https://s5-media./cms/client/b0b1898.js" defer></script><script src="https://s5-media./cms/client/e8504c3.js" defer></script><script src="https://s5-media./cms/client/0efe247.js" defer></script><script src="https://s5-media./cms/client/db7a1e7.js" defer></script><script src="https://s5-media./cms/client/d19debc.js" defer></script><script src="https://s5-media./cms/client/3680d48.js" defer></script><script src="https://s5-media./cms/client/b5de2e6.js" defer></script><script src="https://s5-media./cms/client/a51beae.js" defer></script><script src="https://s5-media./cms/client/a935392.js" defer></script><script src="https://s5-media./cms/client/79d2904.js" defer></script><script src="https://s5-media./cms/client/345e257.js" defer></script><script src="https://s5-media./cms/client/a987fe9.js" defer></script> </body> </html>
