calc（）は常にheightではなくwidthで動作しますか？

Question

私はdivを100vhページの中央に垂直に作成しようとしました。

divが84px高いので、私が作っ：

margin-top: calc(50% - 42px); 

しかしブラウザは常に外側のdiv、外側のdiv（100VH）のない高さの幅をとるように思えます。 divではなく、高さのパーセントをどのように使用できますか？

Answer 1

しかしブラウザは常に外側のdiv

はいの幅をとるように思えます。

％は、生成されたボックスの包含ブロックの幅に対して計算されます。これは 'margin-top'と 'margin-bottom'にも当てはまります。私はあなたがすることはできません、少なくともではないプレーンなCSSで高さ

のパーセントを使用することができますどのように

---

。

実際に実行時に値を計算する必要がある場合は、JavaScriptを使用できます。

高さを知っているので（明示的に100vhと指定しています）、その値を使用できます。あなた自身を繰り返したくない場合は

margin-top: calc(50vh - 42px); 

、その後、あなたは変数に100vhを保存聞かせなどSASSとしてプリプロセッサを、使用することができます。

Answer 2

実際の要素の幅にマージンが計算されるため、余白が計算されているため、コードに問題があります。 margin-top: 50%と言ったら、「この要素の幅の50％」を意味します。あなたが含まれている要素の高さが100vhであることを知っているとあなたは、ビューポートの高さの50％が必要な場合だけではなく、50%.