更改边距响应

Question

我想要的方式，在上边距是基于div的高度设置响应格式化HTML DIV：jsfiddle

有包装内的另一个div有一个display: none设置为它，但它可能会更改时，用户输入一个错误的密码。事情是，下面有一个div，当display: content设置为第二个div时，它被推下。我希望页面的内容能够响应地向上而不是向下。

如何现在：

应该如何：

Answer 1

鉴于你的榜样，你的目标和你的喜好，以避免Flexbox的由于IE10，我觉得你最好的选择是使用display:table为这个容器。

使用此功能，您可以在“表格单元格”中使用vertical-align属性。

检查下面的例子。为了演示目的，我添加了一个切换按钮来显示/隐藏您的验证码。 可能想要全屏查看以获得效果。

$("#toggle").on('click', function() { 
 
    $(".captcha").toggle(); 
 
});

html,body { 
 
    height: 100%; 
 
} 
 
.outer-wrapper { 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #eeeeee; 
 
    display: table; 
 
} 
 

 
.inner-wrapper { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    height: inherit; 
 
} 
 

 
.login-wrapper { 
 
    background-color: #172238; 
 
    color: white; 
 
    width: 200px; 
 
    text-align: center; 
 
    height: auto; 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
.captcha{ 
 
    margin-top: 250px; 
 
    display: content; // This one changes 
 
} 
 

 
.homologation-line { 
 
    min-width: 200px; 
 
    background-color: #ffd800; 
 
    color: black; 
 
    text-align: center; 
 
    height: 30px; 
 
} 
 

 
#toggle { 
 
position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="toggle">toggle captcha</button> 
 
<div class="outer-wrapper"> 
 
    <div class="inner-wrapper"> 
 
     <div class="login-wrapper"> 
 
     <p>Login</p> 
 
     <div class="captcha"> 
 
      ENTER THE DIGITS: 
 
     </div> 
 
    </div> 
 
    <div class="homologation-line"> 
 
     HOMOLOGATION 
 
    </div> 
 
    </div> 
 
</div>