如何在Div的高度变化时使边距保持不变

Question

我有一个奇怪的问题，我正在构建一个简单的html和css以及js弹出登录界面，我不知道为什么每次我从login弹出式弹出到Signup/Register弹出边距顶部的变化。

当我从“登录”弹出到“注册”弹出时，我希望保持“页边距”的不变，尤其是在移动视图上，我需要它保持不变，以不扭曲移动视图。

请看下面的图片和下面的代码。

首先，登录接口，请注意其上方的边距

​

​

现在，当我单击“注册”时，它会按需要打开寄存器，但会更改页边距顶部集。

其次，注册界面，但是边距顶部已经改变了，我不希望它改变。

​

​

我的代码

    <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;
     }

Answer 1

CSS的主要属性似乎是以您的模式为中心。所以更大的模式，更少的边际。只需通过转换使其水平(而不是垂直)中心:翻译(-50%，0)；

Answer 2

这是您给我们的代码，但是我们甚至不能正确地运行/调试它，因为它缺少代码。你能更新你的代码吗？

​

#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);
}
}

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

 .modal-body {
 width:100%;
 }

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

<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>

​