高さを持たない要素に高さを可変で設定したい。「padding-top」で、親要素の幅(width)に対してのパーセンテージで設定を行う。可変の高さ中の要素が高さを持たなかったり、中の要素がそもそもない場合、それを囲う要素の高さは0となってしまいます。そこで「padding-top」を使うことで、高さが可変になるように設定してみましょう。〇〇%;」と設定することで、親要素の幅を100%として、それに応じた高さを表示してくれます。スマートフォンでの背景画像の例まず、下記画像は、幅800px、高さ400pxです。この画像と同じ幅800pxのdivで囲い、背景画像として呼び出す場合、高さを400pxで設定してしまっては、PCは問題ありませんがスマートフォンで高さ400pxのままとなり、画像自体は切れる形で表示されてしまいます。スマートフォンでもちょうどの比率となるようにするため、「padding-top」を活用します。DEMOはこちらぜひスマートフォンの実機でご覧ください。〇〇%;」と設定することで、親要素の幅(width)を100%とした、相対的なpx数値で表示できるようになります。様々な場面で活用できますので、ぜひお試しください。z-indexは親、先祖要素に依存してしまうbox-sizingで、borderやpaddingをはみ出させないようにする。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。解決策このサイトについて。