修复CSS弹出框多余空白问题

你的弹窗出现大量空白，核心是当前CSS的容器宽度、定位和内边距设置不合理，按下面的步骤修改即可：

• 限制弹窗背景层宽度，避免全屏空白
  原.popup设了width:100%，导致背景层占满整个屏幕，而你的内容只有640px，两侧自然出现空白。改成自适应内容宽度并居中：

  .popup {
    height: auto; /* 展开后自适应内容高度，替代原0%（JS控制展开时可动态调整） */
    width: auto;
    max-width: 640px; /* 和你的内容宽度匹配 */
    position: fixed;
    z-index: 100;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 垂直水平居中 */
    background-color: rgba(0,0,0, 0.9);
    transition: 0.3s;
    padding: 20px; /* 可选：给内容加内边距，避免贴边 */
  }
  

• 清理内容容器的多余设置
  原.popup-content的top:20%会强制上方留空白，padding-right:36px也会造成右侧多余空间，修改如下：

  .popup-content {
    position: relative;
    width: 100%;
    padding-right: 0; /* 去掉多余右内边距 */
    margin-top: 0; /* 取消强制上边距 */
    text-align: center;
  }
  

• 对齐内容与弹窗宽度
  你的.popup a设了max-width:700px，超过了640px的内容宽度，改成和弹窗最大宽度匹配：

  .popup a {
    padding: 0px;  
    max-width: 600px; /* 比弹窗宽度小一点，避免贴边 */
    text-decoration: none;
    font-size: 36px;
    color: #000000;
    display: block;
    margin: 0 auto; /* 链接内容居中 */
  }
  

如果弹窗是通过JS动态修改height展开的，记得把展开后的height设为auto，而非固定百分比，这样弹窗高度会自适应内容，不会出现上下多余空白。

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