建站
咨询
售后
建站咨询
五大常用Div高度自适应的方法
你对Div高度自适应的方法是否了解，这里和大家分享一下5种常用Div高度自适应的方法，希望对你的学习有所帮助。
成都创新互联公司专注于沅陵网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供沅陵营销型网站建设，沅陵网站制作、沅陵网页设计、沅陵网站官网定制、重庆小程序开发公司服务，打造沅陵网络公司原创品牌,更为您提供沅陵网站排名全网营销落地服务。
5种常用Div高度自适应的方法
1.背景图填充
这是使用最广泛的一种做法，无hacks，推荐使用：
SourceCodetoRun
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Equalheight(列高度相同的方法) title></li> <li><styletypestyletype="text/css"></li> <li>body{ </li> <li>padding:0; </li> <li>margin:0; </li> <li>font-size:12px; </li> <li>font-family:Arial,Helvetica,sans-serif; </li> <li>line-height:140%; </li> <li>background:#E7DFD3; </li> <li>} </li> <li>#middle{ </li> <li>width:580px; </li> <li>float:left; </li> <li>background:#FFFFFF; </li> <li>text-align:left; </li> <li>} </li> <li>#header,#footer{ </li> <li>background:#E8E8E8; </li> <li>width:750px; </li> <li>text-align:center; </li> <li>} </li> <li>#sideleft{ </li> <li>width:580px; </li> <li>float:left; </li> <li>position:relative; </li> <li>margin-left:-580px; </li> <li>} </li> <li>#sideright{ </li> <li>width:170px; </li> <li>float:right; </li> <li>position:relative; </li> <li>margin:0-170px00; </li> <li>background:#F0F0F0; </li> <li>} </li> <li>#footer{ </li> <li>clear:both; </li> <li>} </li> <li>h1,h2,address,p{ </li> <li>margin:0; </li> <li>padding:.8em; </li> <li>} </li> <li>h1,h2{font-size:20px;} </li> <li> style></li> <li><scripttypescripttype="text/javascript"></li> <li>// </span> <LI><SPAN> </SPAN><LI class=alt><SPAN><SPAN class=cdata>functiontoggleContent(name,n){ </SPAN> </SPAN><LI><SPAN><SPAN class=cdata>vari,t='',el=document.getElementById(name); </SPAN> </SPAN><LI class=alt><SPAN><SPAN class=cdata>if(!el.origCont)el.origCont=el.innerHTML; </SPAN> </SPAN><LI><SPAN> </SPAN><LI class=alt><SPAN><SPAN class=cdata>for(i=0;i<N;I++)T+=EL.ORIGCONT; span <> </SPAN><LI><SPAN><SPAN class=cdata>el.innerHTML=t; </SPAN> </SPAN><LI class=alt><SPAN><SPAN class=cdata>} </SPAN> </SPAN><LI><SPAN> </SPAN><LI class=alt><SPAN><SPAN class=cdata>//]]></SPAN><SPAN> </SPAN></SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>script</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>body</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"header"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>h1</SPAN><SPAN class=tag>></SPAN><SPAN>Head</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h1</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"middle"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideright"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideleft"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN>sideleft</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>默认长度加长页面</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。 </SPAN><LI class=alt><SPAN>但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择， </SPAN><LI><SPAN>同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个 </SPAN><LI><SPAN>h3就是一个字大小的方块。由于字体大小的变化，h3 </SPAN><LI class=alt><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>采用印刷式的固定设计方案或许要容易些， </SPAN><LI class=alt><SPAN>因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，</SPAN><LI class=alt><SPAN>就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>也许你想你的网站以某种特定的方式显示， </SPAN><LI class=alt><SPAN>但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，</SPAN><LI class=alt><SPAN>从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、 </SPAN><LI class=alt><SPAN>相对的设计方法并不容易。但是如果恰当利用， </SPAN><LI><SPAN>就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN>sideright</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、 </SPAN><LI><SPAN>相对的设计方法并不容易。但是如果恰当利用， </SPAN><LI class=alt><SPAN>就可以成为增强亲和力和易用性的一个自然选择， </SPAN><LI><SPAN>同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个 </SPAN><LI><SPAN>h3就是一个字大小的方块。由于字体大小的变化，h3 </SPAN><LI class=alt><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，</SPAN><LI><SPAN>则考虑的东西就相对较少。 </SPAN><LI class=alt><SPAN>可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。 </SPAN><LI class=alt><SPAN>任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"footer"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN>Footer </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>address</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>制作：Yzci.Com</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>body</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>html</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN> </SPAN></LI></OL></PRE> <P> [可先修改部分代码再运行查看效果]#p#</P> <P><STRONG>2.采用脚本控制列的高度（一）</STRONG></P> <P>需要事先知道哪列的高度，以此为基准用脚本控制。<BR>document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"<BR>上面的代码是以sideright的基准高度来控制sideleft的高度。</P> <P>代码简单，但比较被动：<BR>SourceCodetoRun </P><PRE><OL class=dp-xml><LI class=alt><SPAN><SPAN></SPAN><LI><SPAN> </SPAN><LI class=alt><SPAN>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>htmlxmlns</SPAN><SPAN class=tag-name>htmlxmlns</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"http://www.w3.org/1999/xhtml"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>metahttp-equiv</SPAN><SPAN class=tag-name>metahttp-equiv</SPAN><SPAN>="Content-Type"</SPAN><LI><SPAN class=attribute-value>content</SPAN><SPAN>="text/html;</SPAN><SPAN class=attribute>charset</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>utf</SPAN><SPAN>-8"</SPAN><SPAN class=tag>/></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>title</SPAN><SPAN class=tag>></SPAN><SPAN>Equalheight(使用JS实现列高度相同的方法)</SPAN><SPAN class=tag></< span><SPAN class=tag-name>title</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>styletype</SPAN><SPAN class=tag-name>styletype</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"text/css"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>body{ </SPAN><LI><SPAN>padding:0; </SPAN><LI class=alt><SPAN>margin:0; </SPAN><LI><SPAN>font-size:12px; </SPAN><LI class=alt><SPAN>font-family:Arial,Helvetica,sans-serif; </SPAN><LI><SPAN>line-height:140%; </SPAN><LI class=alt><SPAN>text-align:center; </SPAN><LI><SPAN>background:#E7DFD3; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN>#wrap{ </SPAN><LI class=alt><SPAN>width:750px; </SPAN><LI><SPAN>margin:0auto; </SPAN><LI class=alt><SPAN>/*overflow:hidden;*/ </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>#header{ </SPAN><LI><SPAN>background:#E8E8E8; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN>#sideleft{ </SPAN><LI class=alt><SPAN>width:580px; </SPAN><LI><SPAN>float:left; </SPAN><LI class=alt><SPAN>background:#FFF; </SPAN><LI><SPAN>text-align:left; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN>#sideright{ </SPAN><LI class=alt><SPAN>width:170px; </SPAN><LI><SPAN>float:left; </SPAN><LI class=alt><SPAN>background:#F0F0F0; </SPAN><LI><SPAN>text-align:left; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN>#footer{ </SPAN><LI class=alt><SPAN>background:#E8E8E8; </SPAN><LI><SPAN>width:100%; </SPAN><LI class=alt><SPAN>float:left; </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>h1,h2,address,p{ </SPAN><LI><SPAN>margin:0; </SPAN><LI class=alt><SPAN>padding:.8em; </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>h1,h2{font-size:20px;} </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>style</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>body</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"wrap"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"header"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>h1</SPAN><SPAN class=tag>></SPAN><SPAN>Head</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h1</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideleft"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN>sideleft</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，</SPAN><LI class=alt><SPAN>就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个 </SPAN><LI class=alt><SPAN>h3就是一个字大小的方块。由于字体大小的变化，h3 </SPAN><LI><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。</SPAN><LI class=alt><SPAN>可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。</SPAN><LI><SPAN>任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，</SPAN><LI class=alt><SPAN>就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个 </SPAN><LI class=alt><SPAN>h3就是一个字大小的方块。由于字体大小的变化，h3 </SPAN><LI><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。</SPAN><LI class=alt><SPAN>可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。</SPAN><LI><SPAN>任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideright"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN>sideright</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，</SPAN><LI><SPAN>就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个 </SPAN><LI><SPAN>h3就是一个字大小的方块。由于字体大小的变化，h3 </SPAN><LI class=alt><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。</SPAN><LI><SPAN>可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。</SPAN><LI class=alt><SPAN>任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>scripttype</SPAN><SPAN class=tag-name>scripttype</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"text/javascript"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN>document.getElementById("sideleft")</SPAN><SPAN class=attribute>.style.height</SPAN><LI><SPAN>=</SPAN><SPAN class=attribute-value>document</SPAN><SPAN>.getElementById("sideright").scrollHeight+"px" </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>script</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"footer"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>Footer </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>address</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>制作：Yzci.Com</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>body</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>html</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN> </SPAN></LI></OL></PRE> <P> [可先修改部分代码再运行查看效果]#p#</P> <P><STRONG>3.采用脚本控制列的高度（二）</STRONG></P> <P>不需要事先知道哪列的高度，脚本自动判断。<BR>代码较复杂，有点延时：</P> <P>SourceCodetoRun </P><PRE><OL class=dp-xml><LI class=alt><SPAN><SPAN></SPAN><LI><SPAN> </SPAN><LI class=alt><SPAN>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>htmlxmlns</SPAN><SPAN class=tag-name>htmlxmlns</SPAN><SPAN>="http://www.w3.org/1999/xhtml"xml</SPAN><SPAN class=attribute>:lang</SPAN><SPAN>="en"lang="en"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>title</SPAN><SPAN class=tag>></SPAN><SPAN>脚本控制三行三列自适应高度DIV布局</SPAN><SPAN class=tag></< span><SPAN class=tag-name>title</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>scriptsrc</SPAN><SPAN class=tag-name>scriptsrc</SPAN><SPAN>="../js/eqCols.js"</SPAN><SPAN class=attribute-value>type</SPAN><SPAN>="text/javascript"</SPAN><SPAN class=tag>></SPAN><SPAN class=tag></< span><SPAN class=tag-name>script</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>styletype</SPAN><SPAN class=tag-name>styletype</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"text/css"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>body{ </SPAN><LI><SPAN>font-size:75%; </SPAN><LI class=alt><SPAN>font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; </SPAN><LI><SPAN>line-height:100%; </SPAN><LI class=alt><SPAN>margin:5px; </SPAN><LI><SPAN>padding:0px; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN>#header,#mid,#footer{ </SPAN><LI class=alt><SPAN>width:760px; </SPAN><LI><SPAN>margin:0pxauto; </SPAN><LI class=alt><SPAN>padding:0px; </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>#header{ </SPAN><LI><SPAN>background:#F4F4F4; </SPAN><LI class=alt><SPAN>height:60px; </SPAN><LI><SPAN>margin-bottom:5px; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN>h3,h5{ </SPAN><LI class=alt><SPAN>padding-top:25px; </SPAN><LI><SPAN>color:#708090; </SPAN><LI class=alt><SPAN>text-align:center; </SPAN><LI><SPAN>margin:0; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN>#fbox{ </SPAN><LI class=alt><SPAN>background:#F1F1F1; </SPAN><LI><SPAN>width:195px; </SPAN><LI class=alt><SPAN>float:left; </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>#mbox{ </SPAN><LI><SPAN>background:#DFF7FF; </SPAN><LI class=alt><SPAN>margin:0px5px0px; </SPAN><LI><SPAN>padding:0px; </SPAN><LI class=alt><SPAN>float:left; </SPAN><LI><SPAN>width:360px; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN>#sbox{ </SPAN><LI class=alt><SPAN>background:#FFEBCC; </SPAN><LI><SPAN>width:195px; </SPAN><LI class=alt><SPAN>float:right; </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>p{ </SPAN><LI><SPAN>margin:0px; </SPAN><LI class=alt><SPAN>padding:10px; </SPAN><LI><SPAN>text-indent:2em; </SPAN><LI class=alt><SPAN>line-height:130%; </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>#footer{ </SPAN><LI><SPAN>background:#CDDBED; </SPAN><LI class=alt><SPAN>border-top:solid5px#FFFFFF; </SPAN><LI><SPAN>text-align:center; </SPAN><LI class=alt><SPAN>height:60px; </SPAN><LI><SPAN>clear:both; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>style</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>bodyonload</SPAN><SPAN class=tag-name>bodyonload</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"P7_equalCols('fbox','mbox','sbox')"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"header"</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>h3</SPAN><SPAN class=tag>></SPAN><SPAN>脚本控制三行三列自适应高度DIV布局</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h3</SPAN><SPAN class=tag>></SPAN><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"mid"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"fbox"</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，</SPAN><LI><SPAN>但是有视力障碍-你我变老时就会成为他们的一员。 </SPAN><LI class=alt><SPAN>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；</SPAN><LI class=alt><SPAN>拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，</SPAN><LI class=alt><SPAN>但是有视力障碍-你我变老时就会成为他们的一员。 </SPAN><LI><SPAN>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；</SPAN><LI><SPAN>拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"mbox"</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，</SPAN><LI class=alt><SPAN>但是有视力障碍-你我变老时就会成为他们的一员。 </SPAN><LI><SPAN>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；</SPAN><LI><SPAN>拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，</SPAN><LI class=alt><SPAN>因为InternetExplorer改变文字大小的方式与别的浏览器不同。 </SPAN><LI><SPAN>Mozilla和Opera可以缩放已经设定像素大小的文字，而Windows下的IE却不能。 </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，</SPAN><LI class=alt><SPAN>但是有视力障碍-你我变老时就会成为他们的一员。 </SPAN><LI><SPAN>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；</SPAN><LI><SPAN>拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，</SPAN><LI class=alt><SPAN>因为InternetExplorer改变文字大小的方式与别的浏览器不同。Mozilla和Opera可以缩放</SPAN><LI class=alt><SPAN>已经设定像素大小的文字，</SPAN><SPAN>而Windows下的IE却不能。 </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sbox"</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，</SPAN><LI><SPAN>但是有视力障碍-你我变老时就会成为他们的一员。 </SPAN><LI class=alt><SPAN>使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；</SPAN><LI class=alt><SPAN>拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"footer"</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>h5</SPAN><SPAN class=tag>></SPAN><SPAN>制作：Yzci.Com</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h5</SPAN><SPAN class=tag>></SPAN><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>body</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>html</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN> </SPAN></LI></OL></PRE> <P> [可先修改部分代码再运行查看效果]#p#</P> <P><STRONG>4.采用负的外边界和内补丁相结合</STRONG></P> <P>不需要事先知道哪列的高度。</P> <P>hacks比较多（主要是opera的），但容易使用，推荐：</P> <P>SourceCodetoRun </P><PRE><OL class=dp-xml><LI class=alt><SPAN><SPAN></SPAN><LI><SPAN> </SPAN><LI class=alt><SPAN>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>htmlxmlns</SPAN><SPAN class=tag-name>htmlxmlns</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"http://www.w3.org/1999/xhtml"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>metahttp-equiv</SPAN><SPAN class=tag-name>metahttp-equiv</SPAN><SPAN>="Content-Type"</SPAN><SPAN class=attribute-value>content</SPAN><SPAN>="text/html;</SPAN><SPAN class=attribute>charset</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>utf</SPAN><SPAN>-8"</SPAN><SPAN class=tag>/></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>title</SPAN><SPAN class=tag>></SPAN><SPAN>Equalheight(DIV+CSS布局中自适应高度的解决方法)</SPAN><SPAN class=tag></< span><SPAN class=tag-name>title</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>styletype</SPAN><SPAN class=tag-name>styletype</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"text/css"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>body{ </SPAN><LI><SPAN>padding:0; </SPAN><LI class=alt><SPAN>margin:0; </SPAN><LI><SPAN>font-size:12px; </SPAN><LI class=alt><SPAN>font-family:Arial,Helvetica,sans-serif; </SPAN><LI><SPAN>line-height:140%; </SPAN><LI class=alt><SPAN>text-align:center; </SPAN><LI><SPAN>background:#E7DFD3; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN>#wrap{ </SPAN><LI class=alt><SPAN>width:750px; </SPAN><LI><SPAN>margin:0auto; </SPAN><LI class=alt><SPAN>overflow:hidden; </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>#header{ </SPAN><LI><SPAN>background:#E8E8E8; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN>#sideleft{ </SPAN><LI class=alt><SPAN>width:580px; </SPAN><LI><SPAN>float:left; </SPAN><LI class=alt><SPAN>background:#FFF; </SPAN><LI><SPAN>text-align:left; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN>#sideright{ </SPAN><LI class=alt><SPAN>width:170px; </SPAN><LI><SPAN>float:left; </SPAN><LI class=alt><SPAN>background:#F0F0F0; </SPAN><LI><SPAN>text-align:left; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN>/*easyclearing*/ </SPAN><LI class=alt><SPAN>#wrap:after </SPAN><LI><SPAN>{ </SPAN><LI class=alt><SPAN>content:'[DONOTLEAVEITISNOTREAL]'; </SPAN><LI><SPAN>display:block; </SPAN><LI class=alt><SPAN>height:0; </SPAN><LI><SPAN>clear:both; </SPAN><LI class=alt><SPAN>visibility:hidden; </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>#wrap </SPAN><LI><SPAN>{ </SPAN><LI class=alt><SPAN>display:inline-block; </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>/*\*/ </SPAN><LI><SPAN>#wrap </SPAN><LI class=alt><SPAN>{ </SPAN><LI><SPAN>display:block; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN>/*endeasyclearing*/ </SPAN><LI class=alt><SPAN>/*\*/ </SPAN><LI><SPAN>#sideleft,#sideright </SPAN><LI class=alt><SPAN>{ </SPAN><LI><SPAN>padding-bottom:32767px!important; </SPAN><LI class=alt><SPAN>margin-bottom:-32767px!important; </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>@mediaalland(min-width:0px){ </SPAN><LI><SPAN>#sideleft,#sideright </SPAN><LI class=alt><SPAN>{ </SPAN><LI><SPAN>padding-bottom:0!important; </SPAN><LI class=alt><SPAN>margin-bottom:0!important; </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>#sideleft:before,#sideright:before </SPAN><LI><SPAN>{ </SPAN><LI class=alt><SPAN>content:'[DONOTLEAVEITISNOTREAL]'; </SPAN><LI><SPAN>display:block; </SPAN><LI class=alt><SPAN>background:inherit; </SPAN><LI><SPAN>padding-top:32767px!important; </SPAN><LI class=alt><SPAN>margin-bottom:-32767px!important; </SPAN><LI><SPAN>height:0; </SPAN><LI class=alt><SPAN>} </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>/**/ </SPAN><LI><SPAN>#footer{ </SPAN><LI class=alt><SPAN>background:#E8E8E8; </SPAN><LI><SPAN>width:100%; </SPAN><LI class=alt><SPAN>float:left; </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>h1,h2,address,p{ </SPAN><LI><SPAN>margin:0; </SPAN><LI class=alt><SPAN>padding:.8em; </SPAN><LI><SPAN>} </SPAN><LI class=alt><SPAN>h1,h2{font-size:20px;} </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>style</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>body</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"wrap"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"header"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>h1</SPAN><SPAN class=tag>></SPAN><SPAN>Head</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h1</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideleft"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN>sideleft</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，</SPAN><LI class=alt><SPAN>就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个 </SPAN><LI class=alt><SPAN>h3就是一个字大小的方块。由于字体大小的变化，h3 </SPAN><LI><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。</SPAN><LI class=alt><SPAN>可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。</SPAN><LI><SPAN>任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，</SPAN><LI class=alt><SPAN>就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个 </SPAN><LI class=alt><SPAN>h3就是一个字大小的方块。由于字体大小的变化，h3 </SPAN><LI><SPAN>代表用户喜欢的文字大小的相对单位。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。</SPAN><LI class=alt><SPAN>可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。</SPAN><LI><SPAN>任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>div</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>divid</SPAN><SPAN class=tag-name>divid</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sideright"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN>sideright</SPAN><SPAN class=tag></< span><SPAN class=tag-name>h2</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，</SPAN><LI><SPAN>就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。</SPAN><SPAN class=tag></< span><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>p</SPAN><SPAN class=tag>></SPAN><SPAN>像素是计算机屏幕上的不可缩放的点，而一个 </SPAN><LI><SP <br> 分享名称：五大常用Div高度自适应的方法 <br> 分享链接：<a href="http://jxjierui.cn/article/cocooog.html">http://jxjierui.cn/article/cocooog.html</a> </div> <div class="hot_new"> <div class="page_title clearfix"> <h3>其他资讯</h3> </div> <div class="news_list clearfix"> <ul> <li> <a href="/article/djggoeh.html">为什么大家都说香港云主机配置灵活?原因在哪？（香港云主机）</a> </li><li> <a href="/article/djggojp.html">微特尔是什么意思？加利福尼亚州服务器</a> </li><li> <a href="/article/djggoos.html">Oracle简单高效：使用exp快速导出数据库(oracle导出数据库exp)</a> </li><li> <a href="/article/djggohe.html">Android 解决图片大量下载：软引用必须懂4点</a> </li><li> <a href="/article/djggose.html">云服务器传送很慢是什么原因呢(天翼云上传速度怎么那么慢？)</a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- 底部信息 --> <div class="footer wow fadeInUp"> <div class="rowFluid"> <div class="span12"> <div class="container"> <div class="footer_content"> <div class="span4 col-xm-12"> <div class="footer_list"> <div class="span6"> <div class="bottom_logo"><img src="/Public/Home/images/ewm.jpg" alt="微信服务号二维码" /></div> </div> <div class="span6 col-xm-12"> <div class="quick_navigation"> <div class="quick_navigation_title">快速导航</div> <ul> <li><a href="http://www.63188.cn/" title="顶管施工方案" target="_blank">顶管施工方案</a></li><li><a href="http://www.cdhuace.com/fuwu.html" title="成都名片印刷厂" target="_blank">成都名片印刷厂</a></li><li><a href="http://chengdu.cdweb.net/" title="新网创想" target="_blank">新网创想</a></li><li><a href="https://www.cdcxhl.com/shoulu/" title="免费收录网站" target="_blank">免费收录网站</a></li><li><a href="https://www.cdcxhl.com/" title="成都创新互联" target="_blank">成都创新互联</a></li><li><a href="http://www.hfjike.cn/" title="成都画册印刷" target="_blank">成都画册印刷</a></li><li><a href="http://chengdu.cdcxhl.com/" title="营销型网站建设" target="_blank">营销型网站建设</a></li> </ul> </div> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_link"> <div class="footer_link_title">友情链接</div> <ul id="frientLinks"> <a href="https://www.cdcxhl.com/" title="网站制作" target="_blank">网站制作</a> <a href="https://www.cdcxhl.com/" title="网站建设" target="_blank">网站建设</a> <a href="https://www.cdxwcx.com/tuiguang/" title="成都网络推广" target="_blank">网络推广</a> <a href="http://seo.cdkjz.cn/" title="成都网站推广" target="_blank">网站推广</a> <a href="https://www.cdcxhl.com/xiaochengx.html" title="成都微信小程序开发" target="_blank">小程序开发</a> <a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a> </ul> <div class="footer_link_title">网站建设</div> <ul id="frientLinks"> <li><a href="/">内江浩晨众云建站</a></li> <li><a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a></li> </ul> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_cotact"> <div class="footer_cotact_title">联系方式</div> <ul> <li><span class="footer_cotact_type">企业：</span><span class="footer_cotact_content">青羊区浩晨众云设计工作室（个体工商户）</span></li> <li><span class="footer_cotact_type">地址：</span><span class="footer_cotact_content">成都市青羊区太升南路288号</span></li> <li><span class="footer_cotact_type">电话：</span><span class="footer_cotact_content"><a href="tel:18980820575" class="call">18980820575</a></span></li> <li><span class="footer_cotact_type">网址：</span><span class="footer_cotact_content"><a href="/" title="内江网站建设">www.jxjierui.cn</a></span></li> </ul> </div> </div> </div> </div> </div> <div class="copyright"> <p>公司名称：青羊区浩晨众云设计工作室（个体工商户） 联系电话：18980820575</p> <p><a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">网站备案号：蜀ICP备2025119795号-2</a></p> <p>内江浩晨众云建站 内江网站建设 内江网站设计 内江网站制作 <a href="http://www.cdxwcx.cn/" target="_blank">成都做网站</a></p> </div> </div> </div> </div> </body> </html> <script> $(".technical_support_box_z_info_box img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script><div id="think_page_trace" style="position: fixed;bottom:0;right:0;font-size:14px;width:100%;z-index: 999999;color: #000;text-align:left;font-family:'微软雅黑';"> <div id="think_page_trace_tab" style="display: none;background:white;margin:0;height: 250px;"> <div id="think_page_trace_tab_tit" style="height:30px;padding: 6px 12px 0;border-bottom:1px solid #ececec;border-top:1px solid #ececec;font-size:16px"> <span style="color:#000;padding-right:12px;height:30px;line-height: 30px;display:inline-block;margin-right:3px;cursor: pointer;font-weight:700">基本</span> <span style="color:#000;padding-right:12px;height:30px;line-height: 30px;display:inline-block;margin-right:3px;cursor: pointer;font-weight:700">文件</span> <span style="color:#000;padding-right:12px;height:30px;line-height: 30px;display:inline-block;margin-right:3px;cursor: pointer;font-weight:700">流程</span> <span style="color:#000;padding-right:12px;height:30px;line-height: 30px;display:inline-block;margin-right:3px;cursor: pointer;font-weight:700">错误</span> <span style="color:#000;padding-right:12px;height:30px;line-height: 30px;display:inline-block;margin-right:3px;cursor: pointer;font-weight:700">SQL</span> <span style="color:#000;padding-right:12px;height:30px;line-height: 30px;display:inline-block;margin-right:3px;cursor: pointer;font-weight:700">调试</span> </div> <div id="think_page_trace_tab_cont" style="overflow:auto;height:212px;padding: 0; line-height: 24px"> <div style="display:none;"> <ol style="padding: 0; margin:0"> <li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">请求信息 : 2026-02-01 15:17:38 HTTP/1.1 GET : /article/cocooog.html</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">运行时间 : 0.0661s ( Load:0.0032s Init:0.0005s Exec:0.0580s Template:0.0044s )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">吞吐率 : 15.13req/s</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">内存开销 : 2,342.12 kb</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">查询信息 : 12 queries 5 writes </li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">文件加载 : 36</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">缓存信息 : 0 gets 2 writes </li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">配置加载 : 130</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">会话信息 : SESSION_ID=pfk3473cblm3a4qqhjkrf044l2</li> </ol> </div> <div style="display:none;"> <ol style="padding: 0; margin:0"> <li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/index.php ( 1.12 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/ThinkPHP.php ( 4.61 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Think.class.php ( 12.26 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Storage.class.php ( 1.37 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Storage/Driver/File.class.php ( 3.52 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Mode/common.php ( 2.82 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Common/functions.php ( 53.56 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Hook.class.php ( 4.01 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/App.class.php ( 13.49 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Dispatcher.class.php ( 14.79 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Route.class.php ( 13.36 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Controller.class.php ( 11.23 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/View.class.php ( 7.59 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Behavior/BuildLiteBehavior.class.php ( 3.68 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Behavior/ParseTemplateBehavior.class.php ( 3.88 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Behavior/ContentReplaceBehavior.class.php ( 1.91 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Conf/convention.php ( 11.15 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/App/Common/Conf/config.php ( 2.12 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Lang/zh-cn.php ( 2.55 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Conf/debug.php ( 1.48 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/App/Home/Conf/config.php ( 0.32 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/App/Home/Common/function.php ( 3.33 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Behavior/ReadHtmlCacheBehavior.class.php ( 5.62 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/App/Home/Controller/ArticleController.class.php ( 6.11 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/App/Home/Controller/CommController.class.php ( 1.60 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Model.class.php ( 60.11 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Db.class.php ( 32.43 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Db/Driver/Pdo.class.php ( 16.74 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Cache.class.php ( 3.83 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Cache/Driver/File.class.php ( 5.87 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Template.class.php ( 28.16 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Template/TagLib/Cx.class.php ( 22.40 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Template/TagLib.class.php ( 9.16 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/App/Runtime/Cache/Home/7540f392f42b28b481b30614275e4e55.php ( 13.96 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Behavior/WriteHtmlCacheBehavior.class.php ( 0.97 KB )</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">/home/wwwroot/jxjierui.cn/ThinkPHP/Library/Behavior/ShowPageTraceBehavior.class.php ( 5.24 KB )</li> </ol> </div> <div style="display:none;"> <ol style="padding: 0; margin:0"> <li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[ app_init ] --START--</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">Run Behavior\BuildLiteBehavior [ RunTime:0.000004s ]</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[ app_init ] --END-- [ RunTime:0.000024s ]</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[ app_begin ] --START--</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">Run Behavior\ReadHtmlCacheBehavior [ RunTime:0.000137s ]</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[ app_begin ] --END-- [ RunTime:0.000150s ]</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[ view_parse ] --START--</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[ template_filter ] --START--</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">Run Behavior\ContentReplaceBehavior [ RunTime:0.000049s ]</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[ template_filter ] --END-- [ RunTime:0.000067s ]</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">Run Behavior\ParseTemplateBehavior [ RunTime:0.003506s ]</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[ view_parse ] --END-- [ RunTime:0.003521s ]</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[ view_filter ] --START--</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">Run Behavior\WriteHtmlCacheBehavior [ RunTime:0.000077s ]</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[ view_filter ] --END-- [ RunTime:0.000086s ]</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[ app_end ] --START--</li> </ol> </div> <div style="display:none;"> <ol style="padding: 0; margin:0"> <li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') LIMIT 1' at line 1 [ SQL语句 ] : SELECT `id`,`pid`,`navname` FROM `cx_nav` WHERE ( id= ) LIMIT 1 </li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') LIMIT 1' at line 1 [ SQL语句 ] : SELECT `id`,`navname` FROM `cx_nav` WHERE ( id= ) LIMIT 1 </li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ')' at line 1 [ SQL语句 ] : SELECT `id`,`navname` FROM `cx_nav` WHERE ( pid= ) </li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[8] Undefined index: pid /home/wwwroot/jxjierui.cn/App/Home/Controller/ArticleController.class.php 第 47 行.</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[2] file_put_contents(./App/Runtime/Temp/1a2122fb7a645f473485b56c018b2f8c.php): failed to open stream: Permission denied /home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Cache/Driver/File.class.php 第 132 行.</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[8] Undefined index: db_host /home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Db.class.php 第 120 行.</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[8] Undefined index: db_port /home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Db.class.php 第 121 行.</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[8] Undefined index: db_name /home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Db.class.php 第 122 行.</li><li style="border-bottom:1px solid #EEE;font-size:14px;padding:0 12px">[2] file_put_contents(./App/Runtime/Temp/a9db0526c6f2768221a06f80aa452a1c.php): failed to open stream: Permission denied /home/wwwroot/jxjierui.cn/ThinkPHP/Library/Think/Cache/Driver/File.class.php 第 132 行.</li> </ol> </div> <div style="display:none;"> <ol style="padding: 0; margin:0"> </ol> </div> <div style="display:none;"> <ol style="padding: 0; margin:0"> </ol> </div> </div> </div> <div id="think_page_trace_close" style="display:none;text-align:right;height:15px;position:absolute;top:10px;right:12px;cursor: pointer;"><img style="vertical-align:top;" src="data:image/gif;base64,R0lGODlhDwAPAJEAAAAAAAMDA////wAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUQxMjc1MUJCQUJDMTFFMTk0OUVGRjc3QzU4RURFNkEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUQxMjc1MUNCQUJDMTFFMTk0OUVGRjc3QzU4RURFNkEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRDEyNzUxOUJBQkMxMUUxOTQ5RUZGNzdDNThFREU2QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRDEyNzUxQUJBQkMxMUUxOTQ5RUZGNzdDNThFREU2QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAAAAAAALAAAAAAPAA8AAAIdjI6JZqotoJPR1fnsgRR3C2jZl3Ai9aWZZooV+RQAOw==" /></div> </div> <div id="think_page_trace_open" style="height:30px;float:right;text-align: right;overflow:hidden;position:fixed;bottom:0;right:0;color:#000;line-height:30px;cursor:pointer;"><div style="background:#232323;color:#FFF;padding:0 6px;float:right;line-height:30px;font-size:14px">0.0661s </div><img width="30" style="" title="ShowPageTrace" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVERDVENkZGQjkyNDExRTE5REY3RDQ5RTQ2RTRDQUJCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVERDVENzAwQjkyNDExRTE5REY3RDQ5RTQ2RTRDQUJCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NURENUQ2RkRCOTI0MTFFMTlERjdENDlFNDZFNENBQkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NURENUQ2RkVCOTI0MTFFMTlERjdENDlFNDZFNENBQkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5fx6IRAAAMCElEQVR42sxae3BU1Rk/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"></div> <script type="text/javascript"> (function(){ var tab_tit = document.getElementById('think_page_trace_tab_tit').getElementsByTagName('span'); var tab_cont = document.getElementById('think_page_trace_tab_cont').getElementsByTagName('div'); var open = document.getElementById('think_page_trace_open'); var close = document.getElementById('think_page_trace_close').childNodes[0]; var trace = document.getElementById('think_page_trace_tab'); var cookie = document.cookie.match(/thinkphp_show_page_trace=(\d\|\d)/); var history = (cookie && typeof cookie[1] != 'undefined' && cookie[1].split('|')) || [0,0]; open.onclick = function(){ trace.style.display = 'block'; this.style.display = 'none'; close.parentNode.style.display = 'block'; history[0] = 1; document.cookie = 'thinkphp_show_page_trace='+history.join('|') } close.onclick = function(){ trace.style.display = 'none'; this.parentNode.style.display = 'none'; open.style.display = 'block'; history[0] = 0; document.cookie = 'thinkphp_show_page_trace='+history.join('|') } for(var i = 0; i < tab_tit.length; i++){ tab_tit[i].onclick = (function(i){ return function(){ for(var j = 0; j < tab_cont.length; j++){ tab_cont[j].style.display = 'none'; tab_tit[j].style.color = '#999'; } tab_cont[i].style.display = 'block'; tab_tit[i].style.color = '#000'; history[1] = i; document.cookie = 'thinkphp_show_page_trace='+history.join('|') } })(i) } parseInt(history[0]) && open.click(); (tab_tit[history[1]] || tab_tit[0]).click(); })(); </script>