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

2021-12-17 19:33:00 阅读：146 来源： 互联网

标签：min solid height 撑大后 1px div JS border

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

标签：min,solid,height,撑大后,1px,div,JS,border
来源： https://www.cnblogs.com/pyhy/p/15703565.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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