问题：某网页中用表格做了一左一右一下三个单元格，每个单元格里各放一个div，运行时发现右div里内容过多会覆盖下方div。
解决方案：给右div设置min-height或是设置display为table或是table-cell，设置后当右div被内容撑开时，所在的td也会跟着撑开，这样原始的一左一右一下的表格布局不会改变。
附加知识：如果要左右一致，可取右div的offsetheight属性赋给左div的style.height
源码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Div撑大外界TD</title> <script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script> <style type="text/css"> .outerDiv{ width:400px; height:500px; border:0px solid red; margin:0 auto; } #leftDiv{ border:1px solid red; min-height:400px; } #rightDiv{ border:1px solid green; min-height:400px; } .bottomDiv{ border:1px solid blue; height:100px; } </style> </head> <body> <div class="outerDiv"> <table border=0 width=100%> <tr> <td width=50% valign="top"> <div id="leftDiv"> <button onclick="javascript:createLis(30);">点击产生li</button> </div> </td> <td width=50% valign="top"> <div id="rightDiv"> <ul id="rightUl"> </ul> </div> </td> </tr> <tr> <td colspan=2> <div class="bottomDiv"> </div> </td> </tr> </table> </div> </body> <script type="text/javascript"> function createLis(count){ var ul=document.getElementById("rightUl"); // 动态创建节点，有min-height在，能自动撑大td for(var i=0;i<count;i++){ var li=document.createElement("li"); li.appendChild(document.createTextNode("Item-"+i)); ul.appendChild(li); } var leftDiv=document.getElementById("leftDiv"); var rightDiv=document.getElementById("rightDiv"); // 让左右等高,注意取动态DIv高度要用offsetHeight，另外必须加“px” leftDiv.style.height=rightDiv.offsetHeight+"px"; } </script> </html>
参考资料：
1. https://www.bbsmax.com/A/gVdnNELEdW/
2. https://blog.csdn.net/weixin_34023982/article/details/91616413
END