CSS 流動レイアウト: コンテナの幅が大きくなると、パーセンテージに基づく margin-top も大きくなります [重複] 質問する

CSS 流動レイアウト: コンテナの幅が大きくなると、パーセンテージに基づく margin-top も大きくなります [重複] 質問する

私は CSS の流動的なレイアウトとレスポンシブ デザインを学習しているところですが、レイアウトでは px 値を使用せず、すべてパーセンテージ値を使用しようとしています。

これまでのところはうまくいっているようですが、ある場所で、予想外の現象が発生しています。垂直に積み重ねられた 2 つの div の間に、コンテナーの高さに応じて変化する余白を配置しようとしています。ウィンドウを垂直方向にサイズ変更すると余白が変わると予想していましたが、水平方向にサイズ変更すると余白も大きくなります。これは望ましくありません。何が足りないのでしょうか?

ここにフィドルがあります。ご協力をよろしくお願いします。

http://jsfiddle.net/gregir/aP5kz/

ベストアンサー1

CSSでは、4つのmargin:とpadding:のパーセンテージはすべて、...それは無意味に思えるかもしれませんが、それは CSS 仕様の仕様であり、これについては何もできません。

代わりに「ex」(または「em」)を使ってやりたいことをやることはできますか?これは私が「流動的」なマージン/パディングの値を指定するのに慣れている方法です...そしてパーセンテージよりも問題が少ないかもしれません。(関連する直接の経験はありませんが、容疑者計算されたパーセンテージ値の精度が非常に長いと、後でブラウザの非互換性の問題が発生します。私のスタイルでは、CSS パーセンテージを可能な限り整数に制限し、場合によっては小数点以下 1 桁、場合によっては 2 桁に制限します。

コンテナーのパーセンテージである任意のサイズの空の垂直スペースが本当に必要な場合、最初に思いつくのは、「height: nn%」CSS 仕様を持つ別の空の < div > です。または、指定している他の何かが、希望どおりに垂直サイズをすでに処理している可能性があります (マージンは垂直方向のサイズ変更で実際には何も行わないように見えるため)。

おすすめ記事