<!-- 我要生成一個豎直放置的div，寬度是350px，上面是標題固定高度50px，下面是自適應高度的div，且有滾動條。 --><style>html,body{/* height:100vh; */margin:10px; padding:10px;}
</style><div style="display:flex; flex-direction:column; width:350px; height:100%; border:1px solid rgb(70, 50, 50); "><div style="width:100%; height:50px; line-height:50px; text-align: center; background-color:rgba(141, 179, 244, 0.864);">部件列表</div><div style="flex:1; width:100%; overflow: auto; border:0px solid lime; background-color:rgb(243, 247, 243);"><div style="padding:10px; line-height:50px;">- 外盒+活動板內盒+上蓋+盒身面紙<br>- 內蓋+內蓋底貼面紙<br>- 內盒內托+內蓋底貼面紙<br>- 活動板內盒連接+內蓋底貼面紙<br>- 外盒內裱+活動板內盒內裱+彎位連接面紙<br>- 內盒內圍+U形內托面紙<br>- 內蓋底貼+內托U形內托面紙<br>- 外盒1350g單面高光雙灰<br>- 活動板內盒1350g單面高光雙灰<br>- 活動板內盒兩側1350g單面高光雙灰<br>- 上蓋1950g單面高光雙灰<br>- 盒身1950g單面高光雙灰<br>- 內蓋1950g單面高光雙灰<br>- 內圍1200g雙灰<br>- 內托1200g雙灰<br>- 內托U形底貼<br>- 手袋面紙<br>- 手袋袋口條<br>- 手袋底卡<br></div></div>
</div>
改進版：?
<!DOCTYPE html>
<html>
<head><style>html, body {/* height: 100vh; */margin: 0px;padding: 0px;/* box-sizing: border-box; 包含padding在高度內 */}body * {box-sizing: inherit; /* 統一盒模型 */}li{padding: 10px;cursor: pointer;}.div_left_bar{display:flex; flex-direction:column;width:350px; height:100vh;border:1px solid rgb(12, 12, 221);box-sizing: border-box;}#div_main{display: flex;height:100vh;gap:10px;/* margin:10px; *//* padding:10px; */}#div_right_content{flex:1;padding:10px;background:#f4fff4;border:1px solid green;}/* 單據滾動條 */#div_auto_height::-webkit-scrollbar{width: 5px;}#div_auto_height::-webkit-scrollbar-track {/*滾動條里面軌道*/border-radius: 0;/* background: rgba(0, 0, 0, 0.1); */}#div_auto_height::-webkit-scrollbar-thumb {/*滾動條里面小方塊*/border-radius: 5px;background: rgba(0, 0, 0, 0.15);}#div_auto_height{flex:1; min-height:0; overflow:auto;background-color:rgb(243,247,243);}#div_title{height:50px; line-height:50px; text-align:center; background-color:rgba(141,179,244,0.864);}</style>
</head>
<body><div id="div_main"><div class="div_left_bar" ><!-- 固定高度標題 --><div id="div_title" >部件列表</div><!-- 自適應高度+滾動區域 --><div id="div_auto_height"><div style="padding:10px;"><ul style="margin:0; padding-left:20px;"> <!-- 關鍵2：限制UL高度觸發溢出 --><li> - 外盒+活動板內盒+上蓋+盒身面紙</li> <li>- 內蓋+內蓋底貼面紙</li> <li>- 內盒內托+內蓋底貼面紙</li> <li>- 活動板內盒連接+內蓋底貼面紙</li> <li>- 外盒內裱+活動板內盒內裱+彎位連接面紙</li> <li>- 內盒內圍+U形內托面紙</li> <li>- 內蓋底貼+內托U形內托面紙</li> <li>- 外盒1350g單面高光雙灰</li> <li>- 活動板內盒1350g單面高光雙灰</li> <li>- 活動板內盒兩側1350g單面高光雙灰</li> <li>- 上蓋1950g單面高光雙灰</li> <li>- 盒身1950g單面高光雙灰</li> <li>- 內蓋1950g單面高光雙灰</li> <li>- 內圍1200g雙灰</li> <li>- 內托1200g雙灰</li> <li>- 內托U形底貼</li> <li>- 手袋面紙</li> <li>- 手袋袋口條</li> <li>- 手袋底卡</li> <!-- 其他15項列表內容保持不變 --></ul></div></div></div><div id="div_right_content" >我是詳情</div></div><script>// 左側列表點擊事件var listItems = document.querySelectorAll('#div_auto_height li');var div_right_content = document.querySelector ('#div_right_content');listItems.forEach(function (item) {item.addEventListener('click', function () {// 這里可以添加點擊事件的處理邏輯，例如顯示詳情等console.log("點擊了：" + item.textContent);div_right_content.innerHTML = item.textContent;});});</script>
</body>
</html>注意height:100vh和100%是不一樣的。
