が一緒

Question

Iは次のように私は位置を垂直要素を持ちます。問題は、フッターがあることです。したがって、divは常にdivを中心にするためにさらに150px高くなければなりません。

私のdivを上に移動させるには、sass関数またはcalc（）を組み合わせる方法はありますか？

Answer 1

今最近のブラウザのほとんどはtop上だけでなく、内部translateYにcalc()をサポートしています。参照のために下のスニペットを確認してください。スクロールダウンしたときにブラウザのサポートのチェックはこちらを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

あなたがトップでCALCを使用することができます。

top: calc(50% - 150px); 

代わりに負のマージンは仕事ができる：

margin-top: -150px;