सीएसएस स्टिकी फूटर

स्टिकी फ़ुटर को फ़िक्स्ड फ़ुटर के साथ भ्रमित नहीं होना चाहिए - एक स्टिकी फ़ुटर एक ऐसा पैटर्न है जहाँ फ़ुटर हमेशा स्क्रीन के नीचे या तो चिपक जाता है (ऐसे मामलों में जहाँ सामग्री पृष्ठ को नहीं भरती है) या वेबपेज सामग्री के नीचे चिपक जाती है . जैसे ही उपयोगकर्ता पृष्ठ को स्क्रॉल करता है, एक निश्चित पाद लेख स्क्रीन के निचले भाग में रहता है। ये कोड संपादक उदाहरण अंतर को अलग करते हैं:

निश्चित पाद लेख:

    <शीर्षक> चिपचिपा पाद लेख  <शैली> शरीर {चौड़ाई:100%; मार्जिन:0 ऑटो; पाठ-संरेखण:केंद्र; } हैडर {पृष्ठभूमि:नारंगी; ऊंचाई:100 पीएक्स; प्रदर्शन:इनलाइन-ब्लॉक; चौड़ाई:100%; } p { टेक्स्ट-एलाइन:लेफ्ट; चौड़ाई:80%; मार्जिन:0 ऑटो; लाइन-ऊंचाई:5rem; फ़ॉन्ट-आकार:2rem; टेक्स्ट इंडेंट:5rem; } पाद लेख {पृष्ठभूमि:काला; रंग सफेद; स्थिति:निश्चित; नीचे:0; चौड़ाई:100%; }    यह एक हेडर है
 
  यह वेबसाइट की सामग्री है।
 
 Lorem ipsum dolor, बैठो एमेट कंसेक्टूर एडिपिसिसिंग एलीट। एस्परनेचर कम एलिक्विड नोस्ट्रम डोलोरे सनट एक्स एक्सर्सिटेम, एनिम प्रोविडेंट क्विया लॉडेंटियम, ब्लैंडिटिस रेपेलेंडस सिमिलिक इन पॉसिमस, निसी वॉलुपेटेम? Quibusdam, संदेहास्पद बाधा। 
 
 लोरेम इप्सम डोलर सिट एमेट कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। सुविधा वेरिटैटिस डोलोरेमक रिकुसांडे सिमिलिक मोलिटिया क्वॉड इम्पेडिट, रीरम इन्वेंटरी बीटा क्विया वेल एपरियाम माईओरेस करप्टी टेनेटुर इल्लो प्रिसेंटियम रिपुंडिए ए डिस्टेंशियो? 
 
 लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर, एडिपिसिसिंग एलीट। डिक्टा सैप, रीसीइंडिस इन मैक्सिमे पर्सपिसियाटिस कम सिमिलिक ए क्विस एक्यूसामस ब्लैंडिटिस हारुम वोल्यूपेटेट्स और डोलोरिबस ऑटम न्यूमक्वम सिंट? क्यूई, टेम्पोरा राशन! 
 
 लोरेम इप्सम डोलर सिट एमेट कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। अंडर, डेरुंट प्लेसैट? लेबरम माइनस, एडिपिसि ओडिट रिपेलैट करप्टी लिबरो! एस्परियोरेस डेलेक्टस क्वासी डेबिटिस मोलिटिया ईम एट वेल रिकुसांडे क्वास एसे। 
 
 लोरेम इप्सम डोलर सिट एमेट कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। मोलेस्टियस एड डोलोरेम रेरम सस्पिट ईओएस ईयूस लिबेरो एनिमी ओमनीस, ई एसे स्पेशिशिओ डोलोरेमक्यू कॉरपोरेशन, ए क्विडेम इन्वेंटर सीक्वी नोस्ट्रम ऑट इम्पेडिट। 
 
 लोरेम इप्सम डोलर सिट, आमेट कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। सस्सिपिट क्वॉड इप्सम माईओरेस, माइनस नॉन एट एस्पियोरेस करप्टी प्लेसैट नल्ला टेम्पोरिबस इस्ट लिबेरो न्यूमक्वाम एड कल्पा आर्किटेक्टो रिप्रेहेंडरिट निमो डोलोरिबस आईपीसा? 
 
  यह एक निश्चित पाद लेख है।

चिपचिपा पाद लेख:

<शीर्षक> स्टिकी फ़ुटर <शैली> .कंटेनर { न्यूनतम-ऊंचाई:100vh; प्रदर्शन:फ्लेक्स; फ्लेक्स-दिशा:स्तंभ; } .पेज-हेडर, .पेज-फ़ुटर {फ्लेक्स-हटना:0; } h1, h2, h3, h4, h5 {पाठ-संरेखण:केंद्र; } .नारंगी {पृष्ठभूमि:नारंगी; } .पृष्ठ-शरीर {पृष्ठभूमि:नीला; फ्लेक्स-ग्रो:1; } .पेज-बॉडी पी { टेक्स्ट-एलाइन:लेफ्ट; चौड़ाई:80%; मार्जिन:0 ऑटो; लाइन-ऊंचाई:4rem; फ़ॉन्ट-आकार:1.8rem; टेक्स्ट इंडेंट:4rem; } .काला {पृष्ठभूमि:काला; रंग सफेद; }

यह वेबसाइट की सामग्री है।

लोरेम इप्सम डोलर, सिट एमेट कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। मोलेस्टियस नेक इम्पेडिट, लिबरो, ऑफिसिस रिपुंडिए न्यूक्वाम नेसिटाटिबस एनिम सेपिएंट हिक, क्वाम डोलोरेस। अतक पोरो असेंडा मोलेस्टिया। इप्सम लॉडेंटियम क्यूई ओडियो इटैक।

निष्कर्ष

स्थिर पादलेख स्क्रीन के निचले भाग पर रखने के लिए स्थिति का उपयोग करता है। दूसरा फ़ुटर को सामग्री के नीचे रखने के लिए फ्लेक्सबॉक्स के फ्लेक्स-ग्रो और फ्लेक्स-सिकुड़ गुणों का उपयोग करता है। प्रत्येक कोड उदाहरण में पाद लेख की विशेषताओं में अंतर पर ध्यान दें।

उपरोक्त सैंडबॉक्स वातावरण में खेलने से आपको इन पैटर्न को समझने में मदद मिलेगी। चीजों को बदलने और विभिन्न मूल्यों के साथ प्रयोग करने का प्रयास करें।