内容ヘッダーとフッターの間の高さ100％

Question

私はこれについて多くの質問をしてきましたが、どれも私にこの問題の素晴らしい解決策をもたらしました。典型的なスクロールイントロページです。ヘッダーはxピクセルを持つことができますが、フッターは応答性があります（タブレットや携帯電話では背が高くなります）。私は実際には、フッターを外側に引っ張ってからラッパーに内容を垂直方向にセンタリングすることなく、ヘッダーとフッターの間のスペースの100％の高さになるようにラッパーを得ることはできません。

事前に

おかげで

Answer 1

あなたはflex boxesを使用することができます。 flex: 1コンテナは可能な限り多くのスペースをとります。

.wrapper { 
    display: flex; 
    flex-direction: column; 
} 

.wrapper .content { 
    flex: 1; 
} 

.wrapper .header { 
    height: 100px; 
}