求助：otherEmailForm Div区块无法显示，verifyEmailForm显示正常

核心问题原因 #

你的otherEmailForm无法显示，主要是因为父容器.container设置了固定高度400px，而verifyEmailForm的内容已经填满了这个高度，otherEmailForm被推到容器外部，超出部分无法被看到。此外verifyEmailForm默认是块级元素，会占据容器全部宽度，导致otherEmailForm只能排在其下方，但容器高度不足，最终被隐藏。

解决方案1：让两个表单同时显示 #

如果需要同时展示两个表单，只需修改.container的高度设置，让容器自适应内容高度：

.container{
    position: fixed;
    background-color: white;
    padding: 15px;
    font-size: 15px;
    width: 450px;
    /* 移除固定高度，改为自适应 */
    /* height: 400px; */
    min-height: 400px; /* 可选，保持容器最小高度 */
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto; /* 可选，内容过多时显示滚动条 */
}

修改后容器会根据内部内容自动调整高度，otherEmailForm会正常显示在verifyEmailForm下方。

解决方案2：切换显示两个表单（符合"Use another email"交互逻辑） #

如果你的需求是点击"Use another email"按钮时切换到另一个表单，可通过CSS+JS实现：

1. 修改CSS，设置初始显示状态

/* 默认显示验证表单，隐藏备用邮箱表单 */
.verifyEmailForm {
    display: block;
}
.otherEmailForm {
    display: none;
    margin: 20px;
    height: 400px;
    z-index: 99999;
}
/* 切换用的工具类 */
.form-hidden {
    display: none;
}
.form-shown {
    display: block;
}

2. 给切换按钮添加ID

<div class="misc">
    <a id="switchToOtherEmail">Use another email</a>
</div>

3. 添加JS实现切换逻辑

const switchBtn = document.getElementById('switchToOtherEmail');
const verifyForm = document.querySelector('.verifyEmailForm');
const otherForm = document.querySelector('.otherEmailForm');

switchBtn.addEventListener('click', () => {
    verifyForm.classList.toggle('form-hidden');
    otherForm.classList.toggle('form-shown');
});

额外排查建议 #

可以通过浏览器开发者工具（F12）查看otherEmailForm元素的计算样式，确认是否有其他全局CSS规则（比如display: none、visibility: hidden）影响其显示。

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