एक आधुनिक "चिपचिपा पाद लेख" समाधान flexbox का उपयोग करेगा।
tl; डॉ:: कंटेनर (शरीर) display:flex करने के लिए सेट और बच्चे (पाद) आप margin-top:auto करने के लिए नीचे ले जाना चाहते हैं।
सबसे पहले, हम शरीर को अपने सामानों को लंबवत रूप से "फ्लेक्स" करने के लिए सेट करते हैं, यह सुनिश्चित करते हुए कि यह 100% ऊंचाई है।
फिर हमने पाद लेख तत्व पर flex: 0 0 50px सेट किया, जिसका अर्थ है: "बढ़ो मत, संकोच न करें, और 50px की ऊंचाई रखें"। हम वास्तव में, flex विशेषता पूरी तरह से छोड़ सकते हैं और बस height:50px के साथ जाएं।
हम <body> ही कुछ हद तक बेतहाशा जैसी चीजों पर display:flex सेट कर सकते हैं, क्योंकि एक फ्लेक्स कंटेनर के बच्चों flex: 0 1 auto का एक अंतर्निहित मूल्य है, अगर छोड़े गए जो है (लगभग) flex:none के बराबर
(जिसके लिए
flex:0 0 auto आशुलिपि है)
यह margin:auto है जो हमें वह देता है जो हम चाहते हैं। एक फ्लेक्स कंटेनर के भीतर लागू, ऑटो मार्जिन सामान्य रूप से "मुक्त स्थान की समान मात्रा प्राप्त करने" के बजाय, एक नए अर्थ पर लेते हैं, उनका मतलब है "सभी उपलब्ध खाली स्थान को अवशोषित करें"।
कल्पना (8.1. Aligning with auto margins) से:
संरेखित-सामग्री और संरेखित आत्म के माध्यम से संरेखण करने से पहले, किसी भी सकारात्मक मुक्त अंतरिक्ष उस आयाम में ऑटो मार्जिन को वितरित किया जाता है।
कहा अधिक simply:
आप एक फ्लेक्स आइटम पर ऑटो मार्जिन लागू होते हैं, कि आइटम स्वचालित रूप से उसके निर्दिष्ट मार्जिन का विस्तार होगा फ्लेक्स में अतिरिक्त स्थान पर कब्जा करने के कंटेनर
इसके अलावा: "सामान्य" फ्लेक्सबॉक्स लेआउट दृष्टिकोण शायद एक मध्यम खंड एला <div id="main>...</div> को लंबवत 100% तक फ्लेक्स करना होगा, जो भी नीचे एक पाद लेख "छड़ी" बना देगा। यह दृष्टिकोण हमें दिखाता है कि लचीला बॉक्स मॉडल वास्तव में, लचीला है ताकि हम अलग-अलग तत्वों का आकार बदल सकें/स्थानांतरित कर सकें।
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#footer {
background-color: #efefef;
flex: 0 0 50px;/*or just height:50px;*/
margin-top: auto;
}
<p>we've assumed only that there's random space-taking content above the footer...</p>
<p>lorem ipsum dolor flex...</p>
<div>
<p>random content.</p><p>random content.</p><p>random content.</p><p>random content.</p>
</div>
<div id="footer">FOOTER</div>