页面源码:
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link href="css/demo.css" rel="stylesheet" type="text/css" /> 7 <script src="scripts/boot.js" type="text/javascript"></script> 8 <link href="scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" /> 9 <link href="utf8-jsp/themes/default/css/umeditor.css" type="text/css" rel="stylesheet"> 10 <script type="text/javascript" src="utf8-jsp/third-party/jquery.min.js"></script> 11 <script type="text/javascript" charset="utf-8" src="utf8-jsp/umeditor.config.js"></script> 12 <script type="text/javascript" charset="utf-8" src="utf8-jsp/umeditor.min.js"></script> 13 <script type="text/javascript" src="utf8-jsp/lang/zh-cn/zh-cn.js"></script> 14 <style type="text/javascript"> 15 16 17 18 </style> 19 </head> 20 <body> 21 22 <div id="test1" style="width: 550px; min-height: 100px; max-height: 600px; "> 23 <div class="mini-fit" style="background: white; float: left; "> 24 <table style="width: 500px; "> 25 <tr> 26 <td> 27 测试: 28 </td> 29 <td> 30 <div id="test2" style=""></div> 31 </td> 32 </tr> 33 </table> 34 </div> 35 </div> 36 37 <a href="javascript: void(0);" id="div1a">1</a> 38 <a href="javascript: void(0);" id="div2a">2</a> 39 40 <div id="test3" style="width: 550px; min-height: 100px; max-height: 600px; "> 41 <div style="background: white; float: left; "> 42 <table style="width: 500px; "> 43 <tr> 44 <td> 45 测试2: 46 </td> 47 <td> 48 <div id="test4" style=""></div> 49 </td> 50 </tr> 51 </table> 52 </div> 53 </div> 54 55 <a href="javascript: void(0);" id="div3a">1</a> 56 <a href="javascript: void(0);" id="div4a">2</a> 57 58 <script type="text/javascript"> 59 60 mini.parse(); 61 62 $("#div1a").on("click", function() { 63 $("#test2").html("1234567890"); 64 }); 65 66 $("#div2a").on("click", function() { 67 $("#test2").html( 68 "1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>" 69 ); 70 }); 71 72 $("#div3a").on("click", function() { 73 $("#test4").html("1234567890"); 74 }); 75 76 $("#div4a").on("click", function() { 77 $("#test4").html( 78 "1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>" 79 ); 80 }); 81 82 </script> 83 84 </body> 85</html>
页面默认效果(进入页面时不操作时):
分别点击1后效果:
分别点击2后效果:
两个div唯一的不同是,第一个有class="mini-fit",第二个没有.
所以,要自适应高度,去掉class="mini-fit",就好了.