带内边距的响应式Div：实现高度不足时显示垂直滚动条

这事儿好办，咱们只需要给外层的.a容器加几个CSS属性就能搞定。核心思路就是让容器在内容高度超过自身时，自动触发垂直滚动。

关键CSS设置 #

给.a添加以下样式：

.a {
  /* 保留你原有的固定高度设置，比如： */
  height: 400px; 
  /* 核心：垂直方向内容超出时自动显示滚动条 */
  overflow-y: auto;
  /* 可选：隐藏不需要的水平滚动条 */
  overflow-x: hidden;
  /* 可选：加个边框方便直观看到容器范围 */
  border: 1px solid #eee;
}

效果说明 #

• overflow-y: auto：当.b的高度超过.a的固定高度时，.a会自动出现垂直滚动条；如果内容没超出，滚动条就不会显示，体验更自然。
• 如果你希望不管内容有没有超出都显示滚动条，可以把auto换成scroll，不过auto是更常用的选择。

适配窗口高度的进阶场景 #

如果你想让.a的高度随窗口高度变化（而不是固定值），比如占满整个视口高度，那需要确保所有父元素（包括html和body）都设置了明确的高度，再给.a设置height: 100%：

html, body {
  height: 100%;
  margin: 0; /* 去掉默认边距 */
}

.a {
  height: 100%;
  overflow-y: auto;
}

这样当窗口高度缩小，.b的高度超过视口高度时，.a就会出现滚动条，完美适配响应式场景。

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