CSSの流体レイアウト：コンテナの幅が大きくなると、パーセンテージに基づくマージン上部が大きくなります
CSSの流動的なレイアウトとレスポンシブデザインを学んでいるだけで、レイアウトにpx値のないすべてのパーセンテージ値を使用しようとしています。
これまでのところ、機能しているように見えますが、ある場所では、私が予期していなかったものを見ています。私は、コンテナの高さに基づいて変化する2つの垂直に積み重ねられたdivの間にマージンを配置しようとしています。ウィンドウの縦方向のサイズを変更すると、マージンが変わると予想されますが、横方向のサイズを変更すると、マージンも大きくなります。これは望ましくありません。私は何が欠けていますか？
ここにフィドルがあります。事前にご協力いただきありがとうございます。
CSSでは、4つのmargin：およびpadding：のパーセンテージはすべて、無意味に見えるかもしれませんが、width ...に相対的です。これはCSS仕様の方法であり、それに対してできることは何もありません。
代わりに 'ex'（または 'em'）でやりたいことができますか？それは私が指定されたマージン/パディングの「流体」値を見るのに慣れている方法です...そしてそれはパーセンテージよりも問題が少ないかもしれません。 （関連する直接的な経験はありませんが、I 疑わしい計算されたパーセンテージ値の非常に長い精度は、後でブラウザの非互換性の問題に対処することになります。私のスタイルはCSSを制限することです可能な場合は整数に対するパーセンテージ、または場合によっては小数点以下1桁または場合によっては2桁です。）
コンテナの割合である正確な任意サイズの空の垂直スペースが本当に必要な場合、最初に思い浮かぶのは、CSS仕様が「height：nn％」の個別の空の<div>です。または、指定した別の何かが既に希望の垂直サイズを処理している可能性があります（垂直方向のサイズ変更では余白が実際には何もしていないように見えるため）。
はい、それは予想外で直感に反しますが、設計どおりに機能します。なぜ機能するのかわかりません。 ウィンドウの高さが減少してもマージン上部のパーセンテージは変化しない を参照してください