CSS – L.I.T.GALLERY inside

コンテンツ量が少ないページで「フッターの下に余白ができるのを防ぎたいけど、position: fixed;で固定はしたくない…」という場合に使える方法をご紹介します。 やり方 display: flex;を仕様することで固定せずに最下部に表示することができます。 HTML ヘッダー コンテンツ フッター CSS html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .wrapper { display: flex; flex-direction: column; min-height: 100%; } .header { height: 100px; background-color: red; } .content { flex-grow: 1; background-color: yellow; } .footer { height: 100px; background-color: skyblue; } 結果

フッターを固定せずに最下部に表示する方法