解决列高度自适应(相同)的五种方法(列宽自适应)

编辑：rootadmin

1.背景图填充这是使用最广泛的一种做法，无hacks，推荐使用： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Equal height(列高度相同的方法)</title> <style type="text/css"> body{ padding: 0; margin: 0; font-size: px; font-family: Arial, Helvetica, sans-serif; line-height: %; background:#E7DFD3; } #middle{ width: px; float:left; background:#FFFFFF; text-align:left; } #header,#footer{ background: #E8E8E8; width: px; text-align:center; } #sideleft{ width: px; float: left; position:relative; margin-left:-px; } #sideright{ width: px; float: right; position:relative; margin: 0 -px 0 0; background: #F0F0F0; } #footer{ clear:both; } h1,h2,address,p{ margin: 0; padding: .8em; } h1,h2{font-size: px;} </style> <script type="text/javascript"> // <![CDATA[ function toggleContent(name,n) { var i,t='',el = document.getElementById(name); if (!el.origCont) el.origCont = el.innerHTML; for (i=0;i<n;i++) t += el.origCont; el.innerHTML = t; } // ]]> </script> </head> <body> <div id="header"> <h1>Head</h1> <div id="middle"> <div id="sideright"> <div id="sideleft"> <h2>sideleft</h2> <p><a href="javascript:toggleContent('sideleft',1)">默认长度</a> <a href="javascript:toggleContent('sideleft',2)">加长页面</a></p> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> </div> <h2>sideright</h2> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> </div></div> <div id="footer"> <address> Footer </address> <p>制作：<a href=" </div> </body> </html> <script language="Javascript"> var now = new Date(); document.write("<img src=' now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); </script> <noscript> <img src=" border='0' width='0' height='0'/> </noscript> 2.采用脚本控制列的高度（一）需要事先知道哪列的高度，以此为基准用脚本控制。 document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px" 上面的代码是以sideright的基准高度来控制sideleft的高度。代码简单，但比较被动： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Equal height(使用JS实现列高度相同的方法)</title> <style type="text/css"> body{ padding: 0; margin: 0; font-size: px; font-family: Arial, Helvetica, sans-serif; line-height: %; text-align: center; background:#E7DFD3; } #wrap{ width: px; margin: 0 auto; /*overflow: hidden;*/ } #header{ background: #E8E8E8; } #sideleft{ width: px; float: left; background: #FFF; text-align: left; } #sideright{ width: px; float: left; background: #F0F0F0; text-align: left; } #footer{ background: #E8E8E8; width: %; float: left; } h1,h2,address,p{ margin: 0; padding: .8em; } h1,h2{font-size: px;} </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Head</h1> </div> <div id="sideleft"> <h2>sideleft</h2> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> </div> <div id="sideright"> <h2>sideright</h2> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> </div> <script type="text/javascript"> document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px" </script> <div id="footer"> <address> Footer </address> <p>制作：<a href=" </div> </div> </body> </html><script language="Javascript"> var now = new Date(); document.write("<img src=' now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); </script> <noscript> <img src=" border='0' width='0' height='0'/> </noscript> 3.采用脚本控制列的高度（二）不需要事先知道哪列的高度，脚本自动判断。代码较复杂，有点延时： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>脚本控制三行三列自适应高度DIV布局</title> <script src="../js/eqCols.js" type="text/javascript"></script> <style type="text/css">  </style> </head> <body onload="P7_equalCols('fbox','mbox','sbox')"> <div id="header"><h3>脚本控制三行三列自适应高度DIV布局</h3></div> <div id="mid"> <div id="fbox"><p> 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p><p> 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p></div> <div id="mbox"><p> 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p> <p> 如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。 </p> <p> 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p> <p> 如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。 </p> </div><div id="sbox"><p> 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p></div> </div> <div id="footer"><h5>仅供演示<a href=" </body> </html> <script language="Javascript"> var now = new Date(); document.write("<img src=' now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); </script> <noscript> <img src=" border='0' width='0' height='0'/> </noscript> 4.采用负的外边界和内补丁相结合不需要事先知道哪列的高度。 hacks比较多（主要是opera的），但容易使用，推荐： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title> <style type="text/css"> body{ padding: 0; margin: 0; font-size: px; font-family: Arial, Helvetica, sans-serif; line-height: %; text-align: center; background:#E7DFD3; } #wrap{ width: px; margin: 0 auto; overflow: hidden; } #header{ background: #E8E8E8; } #sideleft{ width: px; float: left; background: #FFF; text-align: left; } #sideright{ width: px; float: left; background: #F0F0F0; text-align: left; } /* easy clearing */ #wrap:after { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; height: 0; clear: both; visibility: hidden; } #wrap { display: inline-block; } /**/ #wrap { display: block; } /* end easy clearing */ /**/ #sideleft, #sideright { padding-bottom: px !important; margin-bottom: -px !important; } @media all and (min-width: 0px) { #sideleft, #sideright { padding-bottom: 0 !important; margin-bottom: 0 !important; } #sideleft:before, #sideright:before { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; background: inherit; padding-top: px !important; margin-bottom: -px !important; height: 0; } } /**/ #footer{ background: #E8E8E8; width: %; float: left; } h1,h2,address,p{ margin: 0; padding: .8em; } h1,h2{font-size: px;} </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Head</h1> </div> <div id="sideleft"> <h2>sideleft</h2> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> </div> <div id="sideright"> <h2>sideright</h2> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> </div> <div id="footer"> <address> Footer </address> <p>制作：<a href=" </div> </div> </body> </html> <script language="Javascript"> var now = new Date(); document.write("<img src=' now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); </script> <noscript> <img src=" border='0' width='0' height='0'/> </noscript> 5.采用负的左右边界和相对定位下面的例子能较好地解决列高度相同的问题。三行二列布局，主要内容在左边，网页宽度px,左列px,右列px。 CSS代码： #middle{ width: px; float:left; background:#FFFFFF; text-align:left; } #sideleft{ width: px; float: left; position:relative; margin-left:-px; } #sideright{ width: px; float: right; position:relative; margin: 0 -px 0 0; background: #F0F0F0; } xhtml代码： <div id="middle"> <div id="sideright"> <div id="sideleft"> </div> </div> </div> 从结构看，middle（使用的是左列希望的背景色）在最外面，宽度等于sideleft的宽度，往里一层是sideright，其宽度为px,浮动方向是右边。但其右面的边界是负的px，相当于将sideright拉向右面（右面紧贴着middle的右边）px的位置。而sideleft又是套在sideright里面的，其内容先于sideright出来，左边界是负的，相当于在sideright左边px，此时sideleft和middle位置重合。优点：不需要背景图片，无hacks，完全的自适应高度。缺点：现在的代码只能左对齐。演示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title> <style type="text/css"> body{ padding: 0; margin: 0; font-size: px; font-family: Arial, Helvetica, sans-serif; line-height: %; text-align: center; background:#E7DFD3; } #wrap{ width: px; margin: 0 auto; overflow: hidden; } #header{ background: #E8E8E8; } #sideleft{ width: px; float: left; background: #FFF; text-align: left; } #sideright{ width: px; float: left; background: #F0F0F0; text-align: left; } /* easy clearing */ #wrap:after { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; height: 0; clear: both; visibility: hidden; } #wrap { display: inline-block; } /**/ #wrap { display: block; } /* end easy clearing */ /**/ #sideleft, #sideright { padding-bottom: px !important; margin-bottom: -px !important; } @media all and (min-width: 0px) { #sideleft, #sideright { padding-bottom: 0 !important; margin-bottom: 0 !important; } #sideleft:before, #sideright:before { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; background: inherit; padding-top: px !important; margin-bottom: -px !important; height: 0; } } /**/ #footer{ background: #E8E8E8; width: %; float: left; } h1,h2,address,p{ margin: 0; padding: .8em; } h1,h2{font-size: px;} </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Head</h1> </div> <div id="sideleft"> <h2>sideleft</h2> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> </div> <div id="sideright"> <h2>sideright</h2> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> </div> <div id="footer"> <address> Footer </address> <p>制作：<a href=" </div> </div> </body> </html> <script language="Javascript"> var now = new Date(); document.write("<img src=' now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); </script> <noscript> <img src=" border='0' width='0' height='0'/> </noscript>

推荐整理分享解决列高度自适应(相同)的五种方法(列宽自适应)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:excel高度自适应,列宽自适应,怎么调节列高,设置列的高度,列宽自适应,设置列的高度,自适应行高列宽,列宽自适应,内容如对您有帮助，希望把文章链接给更多的朋友！

用CSS floats创建三栏页布局三栏布局是目前最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整

如何正确使用标题元素、段落和强制换行如何正确使用标题元素HTML标题元素类型是h1、h2、h3、h4、h5和h6，数字表示标题的结构级别，我们要像在学校里学习那样认真对待标题（呵呵，不过我没

网页设计布局基础第1/4页正如你现在所看到的一样，网页的布局设计变得越来越重要。访问者不愿意再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容