] एक सामान्य चुनौती एक ऐसे पाद को प्राप्त कर रही है, जो पृष्ठ या सामग्री के निचले भाग में रहता है, जिसके आधार पर कम है। चुनौती यह है कि लेख तत्व के भीतर सामग्री ऊंचाई के आधार पर पाद लेख की स्थिति को गतिशील रूप से समायोजित किया जाए। जब सामग्री सीमित हो जाती है, तो पैरों को पर्याप्त सामग्री होने पर पृष्ठ के निचले हिस्से में चिपकना चाहिए, लेकिन ब्राउज़र विंडो के निचले हिस्से में जाना चाहिए। फ्लेक्सबॉक्स एक बहुमुखी लेआउट प्रणाली प्रदान करता है जो एक कंटेनर के भीतर तत्वों की स्थिति और संरेखण को सरल करता है। फ्लेक्सबॉक्स के तत्वों को लंबवत रूप से संरेखित करने की क्षमता का उपयोग करके, हम वांछित चिपचिपा पाद व्यवहार प्राप्त कर सकते हैं। शरीर { ऊंचाई: 100%; मार्जिन: 0; गद्दी: 0; } #मेन-रैपर { प्रदर्शन: फ्लेक्स; फ्लेक्स-दिशा: स्तंभ; न्यूनतम-ऊंचाई: 100%; } लेख { फ्लेक्स: 1; }

इस सेटअप में, #मेन-रैपर तत्व फ्लेक्सबॉक्स कंटेनर है, और इसमें कॉलम के लिए फ्लेक्स-दिशा सेट है, जिसका अर्थ है कि तत्वों को लंबवत रूप से ढेर किया जाएगा। लेख तत्व में फ्लेक्स: 1 है, जो इसे हेडर और नेविगेशन द्वारा नहीं ली गई शेष स्थान पर कब्जा कर लेता है। हालाँकि, जब सामग्री सीमित हो जाती है, तो लेख सिकुड़ जाता है, और पादर गतिशील रूप से ब्राउज़र विंडो के निचले हिस्से में चला जाता है, क्योंकि #मेन-रैपर तत्व की न्यूनतम-ऊंचाई यह सुनिश्चित करती है कि यह हमेशा व्यूपोर्ट भरता है।