【CSS/JS】如何防止div被动态内容撑大后覆盖下方内容

问题：某网页中用表格做了一左一右一下三个单元格，每个单元格里各放一个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>