fixed定位模态框：设置bottom:auto后内容过多无法滚动的问题咨询

问题出在你移除bottom: 5%后，模态框的高度没有了上限——它会完全由内部内容撑开，当内容高度超过视口时，模态框会直接超出视口范围，但因为没有明确的高度限制，overflow-y: auto无法触发滚动效果。

给你调整后的CSS代码，既能实现内容少时高度自适应，又能在内容过多时显示滚动条：

.modal {
  max-width: 700px;
  position: fixed;
  margin: auto;
  background: #000;
  color: #eee;
  top: 5%;
  left: 0;
  right: 0;
  bottom: auto;
  /* 限制最大高度为视口高度减去上下5%的边距 */
  max-height: calc(100vh - 10%);
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}

核心改动是添加了max-height: calc(100vh - 10%)：

• 当内容较少时，max-height不会生效，模态框高度随内容自动调整；
• 当内容高度超过calc(100vh - 10%)时，模态框高度被限制在这个值，超出的内容会触发垂直滚动条。

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