高さが低い要素に高さを揃える / masuP.net

通常、ウェブのレイアウトにおいて高さ揃えというと水平方向に並んだ要素のうち一番高い要素にあわせて他の要素の高さを揃えることがほとんどかと思いますが、今回は高さが低い要素に合わせて高さを揃える実装が必要になりました。 2017年にもなって高さ揃えの話かとは思いつつ、検索してもこれと言った方法が見つからなかったため実際に実装した方法を紹介します。 要件 具体的には、左カラムに高さが可変のニュースエリアがあり右カラムにバナー画像が並ぶレイアウトで、バナーの数は2 〜 4個。こちらも高さが可変します。全体の高さはバナーがある右カラムに依存し、左のニュースカラムが右カラムより高くなる場合は高さを右カラムに合わせて、はみ出したコンテンツを閲覧するためにスクロールバーを出す、という要件です。 なお、仮に左カラムのコンテンツが少なく右カラムの方が高くなった場合は、右カラムの高さを低くして合わせるのではなく

[reboot_in]

従属要素にheight:0を追加。