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