如何让固定定位的表单容器内内容可滚动？

要给fixed定位的表单容器添加滚动功能，只需对CSS做两处关键修改：

1. 给.formContainer设置最大高度和垂直滚动属性，让内容超出时自动出现滚动条
2. 调整.formPopup的样式，确保它能适配内部滚动的容器

修改后的完整CSS代码 #

* {
  box-sizing: border-box;
}
.openBtn {
  display: flex;
  justify-content: left;
}
.openButton {
  border: none;
  border-radius: 5px;
  background-color: #1c87c9;
  color: white;
  padding: 14px 20px;
  cursor: pointer;
  position: fixed;
}
.loginPopup {
  position: relative;
  text-align: center;
  width: 100%;
}
.formPopup {
  display: none;
  position: fixed;
  left: 50%;
  top: 5%;
  transform: translate(-50%, 5%);
  border: 3px solid #999999;
  z-index: 9;
  width: fit-content;
}
.formContainer {
  max-width: 300px;
  max-height: 80vh;
  padding: 20px;
  background-color: #fff;
  overflow-y: auto;
}
.formContainer input[type=text],
.formContainer input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 20px 0;
  border: none;
  background: #eee;
}
.formContainer input[type=text]:focus,
.formContainer input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
.formContainer .btn {
  padding: 12px 20px;
  border: none;
  background-color: #8ebf42;
  color: #fff;
  cursor: pointer;
  width: 100%;
  margin-bottom: 15px;
  opacity: 0.8;
}
.formContainer .cancel {
  background-color: #cc0000;
}
.formContainer .btn:hover,
.openButton:hover {
  opacity: 1;
}

关键修改说明 #

• max-height: 80vh：限制表单容器的最大高度为视口高度的80%，确保弹窗不会超出屏幕范围，同时给顶部和底部留出空间
• overflow-y: auto：当表单内容高度超过max-height时，自动显示垂直滚动条；内容不足时则隐藏滚动条，保持界面整洁
• 修正.formPopup的left: 50%：之前的45%会导致弹窗未完全水平居中，调整后配合transform: translate(-50%, 5%)实现精准居中
• 给.formPopup添加width: fit-content：让弹窗宽度自动适配内部的.formContainer，避免出现不必要的空白

这样修改后，即使添加更多表单字段，容器也会保持设置的最大高度，超出的内容可通过滚动查看，无需手动调整容器高度。

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