道州网官方博客

首页 > 未分类 > JS实现DIV左右等高

JS实现DIV左右等高

2010年7月29日 admin 发表评论阅读评论

近日，道州网在给一客户进行网站设计时，碰到了DIV左右等高的问题，一直以来，JS实现DIV左右等高有解决方案，但是没有保存下来，这次先保存了JS实现DIV左右等高，方便以后使用，代码如下：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>JS实现DIV左右等高</title> </head> <script language="javascript"> window.onload = function() { var m1 = document.getElementById("left"); var m2 = document.getElementById("right"); maxh = (m1.offsetHeight > m2.offsetHeight) ? m1.offsetHeight : m2.offsetHeight; m1.style.Height = maxh + "px"; m2.style.Height = maxh + "px"; m1.style.height = maxh + "px"; m2.style.height = maxh + "px"; } </script> <style> #left{float:left;width:200;height:auto;background:#999;} #right{float:left;width:600;height:auto;background:#666;} </style> <body> <div id="left"> 道州网－道县商业门户网站http://www.daozhou.net<br /> 道州网－道县商业门户网站http://www.daozhou.net<br /> 道州网－道县商业门户网站http://www.daozhou.net<br /> 道州网－道县商业门户网站http://www.daozhou.net<br /> 道州论坛－你我的交流论坛http://blog.daozhou.net<br /> 道州网－道县商业门户网站http://www.daozhou.net<br /> 道州网－道县商业门户网站http://www.daozhou.net<br /> 道州网－道县商业门户网站http://www.daozhou.net<br /> 道州论坛－你我的交流论坛http://blog.daozhou.net<br /> 道州网－道县商业门户网站http://www.daozhou.net<br /> 道州网－道县商业门户网站http://www.daozhou.net<br /> 道州网－道县商业门户网站http://www.daozhou.net<br /> </div> <div id="right"> 道州论坛－你我的交流论坛http://blog.daozhou.net<br /> 道州网－道县商业门户网站http://www.daozhou.net<br /> 道州网－道县商业门户网站http://www.daozhou.net<br /> 道州网－道县商业门户网站http://www.daozhou.net<br /> </div> </body> </html>

提示：你可以先修改部分代码再运行。

另：简单的通过DIV代码即可实现左右等高

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> * { margin:0; padding:0;} body { padding:10px;} .box { width:200px; border-left:700px solid #fff; background:#3399CC;} *html .box { overflow:hidden;} /*修正IE6*/ *+html .box { overflow:hidden;} /*修正IE7*/ .box_a { position:relative; left:-700px; width:690px; height:900px; border:1px solid #f00; background:#990000;} .box_b { position:absolute; top:10px;} </style> </head> <body> <div style="position:relative; margin:auto; width:900px;"> <div class="box"> <div class="box_a">左内容</div> <div class="box_b">右内容</div> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

此外，在蓝色论坛有《纯CSS2列变态等高》也不错，原文地址：http://bbs.blueidea.com/thread-2891151-1-1.html，但由于使用了模拟背景的方法，可扩展性和可适用性都比较差，所以用的人比较少。
当然如果刚好适用这种方法，而且不考虑以后扩展的话，这种方法还是挺方便的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>纯CSS2列变态等高</title> </head> <div style="border-right:solid 180px #f00;zoom:1;background:#000;color:#fff"> <div style="width:180px;float:right;position:relative;right:-180px;"> 右边的<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> 左边的 <div style="clear:both;height:0;overflow:hidden;"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

分类: 未分类标签: DIV, JS, 等高, 道州网

评论 (0) Trackbacks (0) 发表评论 Trackback

本文目前尚无任何评论.

本文目前尚无任何 trackbacks 和 pingbacks.

点击文字弹出定时自动关闭的DIV菜单，利用CSS+JS即可实现买车前后真实生活写照

JS实现DIV左右等高

Recent Posts

Categories

Blogroll

Archives

Meta

道州网官方博客

JS实现DIV左右等高

Recent Posts

Tag Cloud

Categories

Blogroll

Archives

Meta