切换登录/注册弹窗时Div高度变化如何保持margin-top恒定

基于HTML、CSS、JavaScript开发弹窗式登录注册界面时，从登录弹窗切换为注册/登记弹窗的过程中，弹窗的margin-top会发生偏移。
需求为：登录弹窗与注册弹窗切换全程margin-top保持恒定，移动端视图下必须固定该间距值，避免移动端页面布局错乱变形。

• 登录界面：注意弹窗上方的margin-top间距
  
• 注册界面：点击注册按钮唤起注册弹窗时，预设的margin-top出现不符合预期的偏移，不满足需求
  

HTML结构 #

<div id ="open_login_interface">
    <div class="open_login_interface_inner">
        <div class="log-reg-container">
            <div class="modal-content">
                <div class="modal-head">
                    <!--Bla Bla Bla-->
                </div>
                <div class="modal-body">
                    <div class="box" id="login-pop">
                    
                    </div>
                    
                    <div class="box" id="sign-pop">
                    
                    </div>
                </div>
                <div class="modal-footer">
                    <!--Bla Bla Bla-->
                </div>
            </div>
        </div>
    </div>
</div>

CSS样式 #

#open_login_interface {
    display: block;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: url(ie.png);
    background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2);
    z-index: 8888;
}

.open_login_interface_inner {
    background: #fff;
    position: fixed;
    margin: 0 auto;
    margin: 0;
    margin-top: 15%;
    width: 28%;
    min-height: 20%;
    height: auto;
    max-height: 75%;
    left: 0;
    top: 0;
    left: 50%;
    top: 10%;
    transform: translate(-50%, -50%);
    text-align: center;
    border: 0px;
    border-radius: 3px;
}

@media (max-width: 640px){
    .open_login_interface_inner {
        position: absolute;
        width: 80%;
        margin-top: calc((100vh - 100vw)/2);
    }
}

.log-reg-container{
    width: 90%;
    margin: 0 auto;
}   

.modal-content {      
    height:auto;
    width:100%;
}

.modal-body {
    width:100%;
}

.box {
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 20px;
}

偏移核心原因有两点：

1. 定位属性冲突：.open_login_interface_inner同时混用了margin-top百分比、top百分比、transform: translate(-50%, -50%)三套定位逻辑，本身就存在计算冲突。
2. 偏移量依赖自身高度：transform: translate(-50%, -50%)的Y轴偏移量是相对于弹窗自身高度计算的，登录表单和注册表单高度不一致，切换显示时弹窗整体高度变化，Y轴偏移量会同步改变，视觉上就表现为margin-top上下偏移。移动端媒体查询中额外添加的position: absolute和calc()计算margin-top，进一步放大了高度变化带来的位置偏移问题。

1. 清理冲突的定位逻辑，改用遮罩层flex布局固定弹窗位置，让弹窗顶部间距完全由遮罩层的内边距控制，和弹窗自身内容高度解耦。
2. 删除弹窗容器上冗余的margin、top/left、transform定位属性，统一由父级flex布局控制水平居中、顶部间距。
3. 移除移动端媒体查询中特殊的定位和margin计算规则，保持多端定位逻辑一致，同时添加滚动规则避免内容过高溢出屏幕。

修复后的核心CSS代码如下：

#open_login_interface {
    /* 改用flex布局实现居中定位 */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* 固定弹窗顶部距离视口顶部的间距，可根据需求调整数值 */
    padding-top: 10vh;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: url(ie.png);
    background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2);
    z-index: 8888;
    /* 内容过高时允许遮罩层滚动 */
    overflow-y: auto;
}

.open_login_interface_inner {
    background: #fff;
    width: 28%;
    min-height: 20%;
    max-height: 75vh;
    /* 内容过高时弹窗内部滚动 */
    overflow-y: auto;
    text-align: center;
    border-radius: 3px;
    /* 已删除所有冲突的margin、top、left、transform属性 */
}

@media (max-width: 640px){
    .open_login_interface_inner {
        width: 80%;
        /* 已删除原有的absolute定位和calc margin规则，复用统一布局逻辑 */
    }
}

.log-reg-container{
    width: 90%;
    margin: 0 auto;
}   

.modal-content {      
    height:auto;
    width:100%;
}

.modal-body {
    width:100%;
}

.box {
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 20px;
}

调整后，弹窗顶部间距完全由#open_login_interface的padding-top控制，和弹窗内部内容高度无关，切换登录/注册表单时位置不会发生偏移，移动端和桌面端表现一致。

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