如何让Overlay Div（如Bootstrap Modal/Angular Dialog）内容溢出时垂直滚动？

嘿，这个需求其实挺常见的——要让模态框的内容只在真的放不下的时候才出现滚动条，而不是不管内容多少都留着滚动条占位。我来给你拆解一下实现思路，不管是Bootstrap Modal还是Angular Dialog都适用：

关键不能给内容区域设置固定高度，而是要基于当前视口高度和模态框的非内容区域（头部、底部）来计算可用高度。这样当窗口缩放、内容增多导致溢出时，自动触发垂直滚动；内容能完全显示时，滚动条就自动隐藏。

这是所有模态框类组件都能复用的基础逻辑：

• 确保模态框的外层容器是相对视口定位的（比如position: fixed或absolute），避免受页面其他元素影响
• 给内容容器设置以下样式：

.overlay-content {
  /* 100vh是当前视口的总高度，减去的数值是模态框头部+底部的高度，再加上上下的留白/边距，根据你的实际UI调整 */
  max-height: calc(100vh - 120px);
  /* 垂直方向自动判断是否滚动，水平方向禁止滚动（避免内容太宽时出现横向滚动条） */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
}

这样设置后，内容区域的最大高度被限制在视口剩余空间里，内容没超出就不会有滚动条，超出则自动出现。

Bootstrap自带固定的结构类（.modal-dialog、.modal-content、.modal-body），直接针对.modal-body调整即可：

.modal-body {
  /* 这里的180px是.modal-header + .modal-footer的高度，加上模态框默认的上下边距，你可以根据自己的实际样式微调数值 */
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  overflow-x: hidden;
}

如果你的模态框是垂直居中的（用了modal-dialog-centered类），这个设置依然有效，因为Bootstrap的居中逻辑是基于flex自适应高度，不会影响内容区域的动态高度计算。

Angular Material的Dialog有专属的内容类.mat-dialog-content，可以通过两种方式设置：

1. 在组件的样式文件中全局覆盖（或针对当前Dialog组件局部设置）：

.mat-dialog-content {
  /* 减去Dialog的标题栏（如果用了MatDialogTitle）和底部操作栏（MatDialogActions）的高度，以及上下的留白 */
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  overflow-x: hidden;
}

2. 如果你需要更动态的控制，也可以在打开Dialog时通过MatDialogConfig的height属性结合计算，但CSS方式更省心，能自动响应窗口缩放。

• 自定义滚动条样式：默认滚动条可能和你的UI风格不搭，可以用伪元素美化：

.overlay-content::-webkit-scrollbar {
  width: 6px;
}
.overlay-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.overlay-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}
.overlay-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

• 限制模态框宽度：给模态框外层加max-width: 90vw，避免小屏幕上模态框太宽导致横向溢出。

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