हेडर और फुटर के बीच स्पेस-फिलिंग डिव प्लेसमेंट को हल करना

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

फ्लेक्सबॉक्स सॉल्यूशन

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

HTML और CSS कार्यान्वयन

निम्नलिखित कोड समाधान प्रदर्शित करता है:

  

    ...
  
  

    ...
  
  
  

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

फ्लेक्सबॉक्स के लचीलेपन का लाभ उठाकर, आप स्क्रीन रिज़ॉल्यूशन की परवाह किए बिना इष्टतम उपयोगकर्ता अनुभव सुनिश्चित करते हुए, अपने वेबपेज के भीतर सुरुचिपूर्ण ढंग से और जिम्मेदारी से स्थान आवंटित कर सकते हैं।