【CSS/JS】如何防止div被動態內容撐大後覆蓋下方內容
阿新 • • 發佈：2021-12-17
問題：某網頁中用表格做了一左一右一下三個單元格，每個單元格里各放一個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