En utilisant la traduction et la calc() ensemble

Question

J'ai un élément que je verticalement position:

position: absolute; 
top: 50%; 
transform: translateY(-50%) 

Ce apparaît tout droit au milieu de l'écran. Le problème est que j'ai un pied de page, donc le div doit toujours être 150px plus haut pour centrer le div.

Existe-t-il un moyen de combiner une fonction sass ou calc() pour que mon div monte?

Answer 1

Maintenant, la plupart des navigateurs modernes supporte calc() sur top ainsi que dans l'intérieur translateY. Consultez l'extrait ci-dessous pour référence. Pour chèque de soutien du navigateur ici caniuse

.parent { 
 
    height: 200px; 
 
    position: relative; 
 
    background: #ccc; 
 
} 
 

 
.child { 
 
    position: absolute; 
 
    min-height: 50px; 
 
    width: 100%; 
 
    background: cyan; 
 
    top: 50%; 
 
    transform: translateY(calc(-50% - 50px)); 
 
} 
 

 
.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 50px; 
 
    width: 100%; 
 
    background: red; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    </div> 
 
    <div class="footer"> 
 
    </div> 
 
</div>

Answer 2

Vous pouvez utiliser calc avec votre top:

top: calc(50% - 150px); 

Alternativement une marge négative pourrait fonctionner:

margin-top: -150px;