前端网页小盒子里面内容的滚动制作

paul jeorgh

已于 2024-05-07 16:51:30 修改

阅读量294

点赞数 4

文章标签：前端

于 2024-04-03 10:08:40 首次发布

本文链接：https://blog.csdn.net/2302_79777012/article/details/137332412

版权

前面小程序项目遇到了这个问题，我就打开vscode .html文件里试了一下，

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Box with Scrollbar Example</title>  
<style>  
  .box1 {  
    width: 200px;  
    height: 300px;  
    border: 1px solid #000; /* Optional: 添加边框以便更好地看到box1的边界 */  
    overflow: hidden; /* 确保box1的内容不会溢出，但这不是必需的，因为box2将处理其内部内容的溢出 */  
  }  
  
  .box2 {  
    width: 100%; /* 使box2宽度与box1相同 */  
    height: 300px; /* 设置一个固定的高度，确保内容溢出时显示滚动条 */  
    overflow-y: auto; /* 当内容溢出时，仅在y轴（垂直方向）上显示滚动条 */  
    border: 1px solid #000; /* Optional: 添加边框以便更好地看到box2的边界 */  
    padding: 10px; /* Optional: 为内容添加一些内边距 */  
  }  
</style>  
</head>  
<body>  
  
<div class="box1">  
  <div class="box2">  
    <!-- 这里是box2的内容，当内容足够多时，滚动条会自动出现 -->  
    <p>内容1</p>  
    <p>内容2</p>  
    <p>内容3</p>  
    <p>ssssssssss</p> 
    <p>ssssssssss</p> 
    <p>ssssssssss</p> 
    <p>ssssssssss</p> 
    <p>ssssssssss</p> 
    <p>ssssssssss</p> 
    <p>ssssssssss</p> 
    <p>ssssssssss</p> 
    <p>ssssssssss</p> 
    <!-- 重复上述<p>标签以填充更多内容 -->  
  </div>  
</div>  
  
</body>  
</html>