如何实现可垂直调整大小的<div>？固定高度时内容需支持滚动

要实现可垂直调整大小、内容超出时自动滚动的<div>，用CSS的resize和overflow属性就能轻松搞定，具体方案如下：

完整示例代码 #

<div class="resizable-container">
  <p>测试内容行1</p>
  <p>测试内容行2</p>
  <p>测试内容行3</p>
  <p>测试内容行4</p>
  <p>测试内容行5</p>
  <p>测试内容行6</p>
  <p>测试内容行7</p>
  <p>测试内容行8</p>
  <p>测试内容行9</p>
  <p>测试内容行10</p>
</div>

<style>
.resizable-container {
  /* 设置初始固定高度 */
  height: 200px;
  /* 仅允许垂直调整大小 */
  resize: vertical;
  /* 限制调整范围（可选） */
  min-height: 100px;
  max-height: 400px;
  /* 内容超出时显示滚动条 */
  overflow: auto;
  /* 可选样式：让容器更显眼 */
  border: 1px solid #ddd;
  padding: 12px;
  background-color: #f9f9f9;
}
</style>

关键属性解析 #

• resize: vertical：指定容器只能垂直拖动调整高度，若需要支持双向调整，可改为resize: both。
• overflow: auto：当容器内内容高度超过容器自身高度时，自动显示垂直滚动条；内容未超出时，滚动条不会显示。
• height：定义容器的初始固定高度，用户拖动调整后，这个值会被更新为新的高度。
• min-height/max-height：可选配置，用来限制用户能调整的高度区间，防止容器被拖得太小或太大。

注意点 #

• resize属性仅对设置了overflow（值不为visible）的元素生效，所以必须配合overflow: auto或overflow: scroll使用。
• 若需要兼容非常老旧的浏览器，建议先确认resize属性的支持情况（目前主流浏览器都已支持）。

内容的提问来源于stack exchange，提问作者PyKKe