更改邊距響應

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>