CSS：画像100％高さ - 50px

Question

私は、ページの下部にフッターを固定したブートストラップテンプレートを使用しています。それは50pxの高さです。

次に、モニターの上部から開始し、フッターの上部で正確に終わる背景画像を使用したいと思います。 100％高さ - 50ピクセル。これは、どのモニター解像度でも発生します。

どのようにCSSを使用して定義できますか？以下のような何か：

background-image { 
height: 100% - 50px; 
} 

Answer 1

あなたが他のいくつかの明示的な計算と一緒にビューポートの高さの一定割合を使っなる、これを処理するためにcalc()機能を使用することができます。

/* This assumes you have a background-size class */ 
.background-image { 
    /* This sets the height to 100% of the viewport height minus 50px */ 
    height: calc(100vh - 50px); 
} 

ます。またcalc(100% - 50px)を使用することができますかあなたが好む他の組み合わせ/表現。

例

.background { 
 
    /* This sets the height to 100% of the viewport height minus 50px */ 
 
    height: calc(100vh - 50px); 
 
    background: #0071bc; 
 
}

<div class='background'> </div>

を使用でき

Answer 2

最初の値が幅であり、第二の値は、バックグラウンドの高さで、その後、あなたが100% - 50px

へcalc()を使用して高さを設定することができますbackground-size

div { 
 
    height: 300px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    background-image: url('http://placehold.it/350x150'); 
 
    background-size: 100% calc(100% - 50px); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
}

<div></div>