当前位置：首页 > news >正文

生成一个竖直放置的div，宽度是350px，上面是标题固定高度50px，下面是自适应高度的div，且有滚动条

news 2025/8/26 4:10:55

<!-- 我要生成一个竖直放置的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%是不一样的。