html中设置让div中的内容超出后自动显示滚动条

HTML中可以通过CSS样式来设置让DIV中的内容超出后自动显示滚动条。以下是设置DIV滚动条的步骤：

1. 创建包含内容的DIV元素

将需要添加滚动条的内容放在一个DIV元素中。可以使用以下代码示例创建一个DIV元素：

<div id="scrollable-content">
  <!-- 这里是需要添加滚动条的内容 -->
</div>

2. 定义CSS样式

在页面的CSS文件中，添加以下内容：

#scrollable-content {
  /* 设置DIV的宽度和高度 */
  width: 300px;
  height: 200px;
  /* 设置overflow属性为auto，当内容超出DIV元素的高度时会自动出现滚动条 */
  overflow: auto;
}

其中，width和height属性可以根据具体情况进行设置，overflow属性的值为auto表示当内容超出DIV元素的高度时会自动出现滚动条。

3. 示例说明1：

例如，在网页内容中需要包含一个列表，列表中有10项，每一项包含一个图片和一段文字描述。可以使用以下代码示例创建一个包含列表的DIV元素：

<div id="list-container">
  <ul>
    <li>
      <img src="item1.jpg">
      <p>这是第一项的描述文字</p>
    </li>
    <li>
      <img src="item2.jpg">
      <p>这是第二项的描述文字</p>
    </li>
    <li>
      <img src="item3.jpg">
      <p>这是第三项的描述文字, 这里测试超出高度后是否会出现滚动条的组件</p>
    </li>
    <li>
      <img src="item4.jpg">
      <p>这是第四项的描述文字</p>
    </li>
   ......
  </ul>
</div>

然后在CSS文件中添加以下内容：

#list-container {
  width: 400px;
  height: 300px;
  overflow: auto;
}

运行代码后，当列表的高度超出DIV元素的高度时，会自动出现纵向滚动条，使用户能够查看所有内容。

4. 示例说明2:

例如，在网页内容中需要包含一个表格，表格有10列，每一列包含几行数据。可以使用以下代码示例创建一个包含表格的DIV元素：

<div id="table-container">
  <table>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
      <th>列4</th>
      <th>列5</th>
      <th>列6</th>
      <th>列7</th>
      <th>列8</th>
      <th>列9</th>
      <th>列10</th>
    </tr>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
      <td>数据7</td>
      <td>数据8</td>
      <td>数据9</td>
      <td>数据10</td>
    </tr>
    <tr>
      <td>数据11</td>
      <td>数据12</td>
      <td>数据13</td>
      <td>数据14</td>
      <td>数据15</td>
      <td>数据16</td>
      <td>数据17</td>
      <td>数据18</td>
      <td>数据19</td>
      <td>数据20</td>
    </tr>
    ......
  </table>
</div>

然后在CSS文件中添加以下内容：

#table-container {
  width: 600px;
  height: 400px;
  overflow: auto;
}

运行代码后，当表格的高度超出DIV元素的高度时，会自动出现纵向滚动条，以便用户能够查看所有内容。