今回のケースは条件が限定的で分かり辛いですが…
ヘッダーやフッターをposition:fixedで固定した時、そのままだと重なってしまうので、その分のスペースをマージン/パディングで前後のブロックに指定する必要があります。
固定するブロックの幅/高さを絶対値で指定する場合はその数値をマージン/パディングに指定すれば良いので問題ありませんが、
では固定するブロックの横幅を100％など相対値で指定した場合、マージン/パディングに設定する値、つまりブロックの”高さ”は、数値としてはいくつにすれば良いのでしょうか。
可変する横幅に対しての「高さ」は、当然ながら相対値で指定をしなければなりません。
そんな困った時にはjQueryなどのjavascriptで自動的に高さを取得して可変させるのが時代的には一般的であり確実ではありますが、
ここでCSSの基本ルールを思い返すと、「padding/marginを相対値で指定すると、親要素の横幅が基準値になる」というルールがあります。左右だけでなく、上下も横幅が基準値になります。このルールを用いれば、固定ブロックの縦横比を計算すれば、高さの固定値が分かります。
オリジナルサイズの幅が800×200pxの固定ブロックを「横100%」で指定する場合は、そのブロックの高さの値は「25%」になります。（4：1のため）
つまり、その場合は前後のマージン/パディングに「25％」を指定すればOKです。
スマホサイトなどデバイスの画面サイズが多様なケースは基本的に相対値指定となるため、思い出すと少し役に立つ知識かもしれません。
（今後position:fixedがスマホで安心して使える様になった時に）
