jQuery实现左右div自适应高度完全相同
最近做前端设计时需要使左右两个DIV高度自适应。http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gifhttp://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gifView Code <div id="cnblogs_code_open_b6d99efb-184c-4e76-9857-4c875927140f" class="cnblogs_code_hide"><!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=utf-8" /> <title>左右DIV高度自适应</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script type="text/javascript"> function $(id) { return document.getElementById(id) } function getHeight() { if ($("left").clientHeight >= $("right").clientHeight) { $("right").style.height = $("left").clientHeight + "px"; } else { $("left").style.height = $("right").clientHeight + "px"; } } window.onload = function() { getHeight(); } </script> <style type="text/css"> #left { height: auto; width: 300px; float: left; border: solid 1px #000;} #right { height: auto; width: 300px; margin-left: 302px; border: solid 1px #000; } </style> </head> <body> <h3> 左右DIV高度自适应 </h3> <div id="left"> 我是左DIV。 </div> <div id="right"> <p>我是右DIV,</p> <p>我的内容比左多。</p> </div> </body></html>
页:
[1]