初行 发表于 2012-10-24 23:55:15

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]
查看完整版本: jQuery实现左右div自适应高度完全相同