css - クロムのcalc()とvhの回避策?

Question

クロムの関数で使用vhするための厳密にcssのみの回避策はありますか?calc()

ページの下部に 25 ピクセルのバーを貼り付けるには、ブラウザーcalc(100vh - 25px)で上部を使用する必要がありますが、クロムで問題が発生しています。margin

Answer 1

要素のbox-sizingプロパティをborder-boxに設定すると、下部に 25 ピクセルのパディングを指定し、マイナス 25 ピクセルのマージンを指定して 25 ピクセルのバーを上部に配置できます。

elem {
    box-sizing: border-box;
    height: 100vh;
    margin-bottom: -25px;
    padding-bottom: 25px;
}

z-index次に、25px のバーが他の要素の上に表示されるように、要素のプロパティをいじる必要がある場合があります。

JSFiddle デモ。

パディングは、コンテンツが 25px バーの下に表示されないようにするために使用されます。

 --------------     --------------     --------------
|              |   |              |   |              |
| 100vh        |   |  100vh       |   |  100vh       |
|              |   |              |   |              |
|              |   |--------------|   |--------------| 25px padding, -25px margin
|              |   | 25px padding |   | 25px bar     |
 --------------     --------------     --------------
| 25px bar     |   | 25px bar     |
 --------------     --------------