我有一个奇怪的问题,我正在构建一个简单的html、css和js弹出式登录界面,我不知道为什么每次我从登录弹出式更改为注册/注册弹出式时,边距顶部都会发生变化.

当我从登录弹出窗口更改为注册弹出窗口时,我想保持页边顶部不变,特别是在移动视图上,我需要它保持不变,以不扭曲移动视图.

请看下面的图片和代码.

首先,Login Interface,请注意上面的边距

Login Interface, kindly note the margin top above it

现在,当我单击Register时,它会根据需要打开Register弹出窗口,但会更改边距顶部集.

第二,Register interface,但利润率顶部已经改变,我不希望它改变.

Register interface, but margin top has changed

我的代码

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

推荐答案

CSS的主要特性似乎是以模态为中心.所以模态越大,边际越小.

Html相关问答推荐

应用于文本而不是弹性容器的Flexbox属性

为什么XPath返回的元素比我预期的要多?

附加点的列表样式

为什么在移动视图中,这个水平可滚动的表格会在表格的右侧显示额外的空间?

为什么不是所有字体好的图标都能与boostRapCDN一起使用呢?

小虫?CSS Flexbox间隙应用于两个内联文本块之间,因为它们之间存在绝对定位的元素

有没有办法根据另一个项目调整FlexBox项目的大小?

创建特定的CSS网格布局

carousel 的垂直滚动按钮居中

仅 Select 悬停的级别,而不 Select 其父级或子级

在移动屏幕上显示时分支树视图的响应能力问题

如何在Rmarkdown中添加千位分隔符?

在HTML使用link标签导入外部CSS时出现元素link不允许使用尾斜杠错误

圆形边框显示在该部分后面.怎么修?

我怎么能有 :not(.class):nth-of-type(even)?

如何使文本显示在页眉/页脚之外?

根据正则表达式 attr 从 read_html 过滤表格

如何修复 flex div 以将全高作为其父级

使用 shell 脚本复制 HTML 文件中的标题标签

Bootstrap - 如何通过 3 级层次 struct 访问 1000 个项目中的一个项目?