ページまたはコンテンツのフッター、どちらかが低い方の方が、

はじめに

Web開発で、特にダイナミックコンテンツを扱う場合、ウェブページの要素の適切な位置を確保することが不可欠です。一般的な課題の1つは、ページまたはコンテンツの下部に残っているフッターを達成することです。課題は、記事要素内のコンテンツの高さに基づいてフッターの位置を動的に調整することです。フッターは、十分なコンテンツがある場合はページの下部に固執する必要がありますが、コンテンツが制限されている場合はブラウザウィンドウの下部に移動します。 FlexBoxは、コンテナ内の要素の位置付けと調整を簡素化する汎用性の高いレイアウトシステムを提供します。 FlexBoxの要素を垂直に整列させる機能を使用することにより、目的のスティッキーフッターの動作を実現できます。 体 { 高さ：100％; マージン：0; パディング：0; } ＃Main-Wrapper { ディスプレイ：Flex; フレックス方向：列; MIN-HEIGHT：100％; } 記事 { フレックス：1; }

このセットアップでは、＃メインワッパー要素はフレックスボックスコンテナであり、列にセットされたフレックス方向に設定されています。つまり、要素は垂直に積み重ねられます。記事要素にはFlex：1があります。これにより、ヘッダーとナビゲーションによって取り上げられない残りのスペースが占められています。ただし、コンテンツが限られている場合、記事は縮小し、フッターはブラウザウィンドウの下部に動的に移動します。＃Main-Wrapper ElementのMin-Heightは、常にビューポートを埋めることを保証します。