HTML में कंटेंट डिव के साथ

Jules David

मंगलवार, 16 जुलाई 2024 को 6:15:09 pm

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

आज्ञा विवरण

flex-direction: column; फ्लेक्स कंटेनर की मुख्य धुरी को लंबवत सेट करता है, बच्चों को ऊपर से नीचे तक रखता है।

flex: 1; फ्लेक्स आइटम को बढ़ने और फ्लेक्स कंटेनर के भीतर उपलब्ध स्थान को भरने की अनुमति देता है।

grid-template-rows: auto 1fr; दो पंक्तियों के साथ एक ग्रिड लेआउट को परिभाषित करता है, जहां पहली पंक्ति में स्वचालित ऊंचाई होती है और दूसरी पंक्ति शेष स्थान लेती है।

overflow: auto; यदि सामग्री कंटेनर से ओवरफ्लो हो जाती है, तो आवश्यकतानुसार स्क्रॉलबार जोड़कर स्क्रॉलिंग सक्षम करता है।

height: 100vh; किसी तत्व की ऊंचाई को व्यूपोर्ट की ऊंचाई के 100% पर सेट करता है।

grid-template-rows ग्रिड लेआउट में प्रत्येक पंक्ति का आकार निर्दिष्ट करता है।

display: flex; एक फ्लेक्स कंटेनर को परिभाषित करता है, जो इसके बच्चों के लिए फ्लेक्सबॉक्स लेआउट मॉडल को सक्षम करता है।

आज्ञा	विवरण
flex-direction: column;	फ्लेक्स कंटेनर की मुख्य धुरी को लंबवत सेट करता है, बच्चों को ऊपर से नीचे तक रखता है।
flex: 1;	फ्लेक्स आइटम को बढ़ने और फ्लेक्स कंटेनर के भीतर उपलब्ध स्थान को भरने की अनुमति देता है।
grid-template-rows: auto 1fr;	दो पंक्तियों के साथ एक ग्रिड लेआउट को परिभाषित करता है, जहां पहली पंक्ति में स्वचालित ऊंचाई होती है और दूसरी पंक्ति शेष स्थान लेती है।
overflow: auto;	यदि सामग्री कंटेनर से ओवरफ्लो हो जाती है, तो आवश्यकतानुसार स्क्रॉलबार जोड़कर स्क्रॉलिंग सक्षम करता है।
height: 100vh;	किसी तत्व की ऊंचाई को व्यूपोर्ट की ऊंचाई के 100% पर सेट करता है।
grid-template-rows	ग्रिड लेआउट में प्रत्येक पंक्ति का आकार निर्दिष्ट करता है।
display: flex;	एक फ्लेक्स कंटेनर को परिभाषित करता है, जो इसके बच्चों के लिए फ्लेक्सबॉक्स लेआउट मॉडल को सक्षम करता है।

आधुनिक सीएसएस लेआउट तकनीकों का उपयोग करना

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

दूसरी लिपि में, लेआउट के लिए नियोजित किया गया है। कक्षा निर्धारित है साथ grid-template-rows: auto 1fr. यह दो पंक्तियों वाला एक ग्रिड बनाता है: पहली पंक्ति (हेडर) स्वचालित रूप से अपनी ऊंचाई समायोजित करती है, और दूसरी पंक्ति (सामग्री) शेष स्थान को भरती है। फ्लेक्सबॉक्स उदाहरण के समान, सामग्री div में एक है अतिप्रवाह सामग्री को सुशोभित ढंग से संभालने की संपत्ति। दोनों विधियाँ तालिकाओं की आवश्यकता को समाप्त करती हैं, एक लचीली और प्रतिक्रियाशील डिज़ाइन प्राप्त करने के लिए आधुनिक सीएसएस लेआउट तकनीकों का लाभ उठाती हैं जो अलग-अलग हेडर ऊंचाइयों को समायोजित करती हैं और यह सुनिश्चित करती हैं कि सामग्री शेष पृष्ठ को भर दे।

शेष स्क्रीन स्थान को भरने के लिए डिव बनाने के लिए फ्लेक्सबॉक्स का उपयोग करना

फ्लेक्सबॉक्स का उपयोग करके HTML और CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Layout</title>
  <style>
    body, html {
      margin: 0;
      height: 100%;
    }
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    .header {
      background-color: #f8f9fa;
      padding: 10px;
    }
    .content {
      flex: 1;
      background-color: #e9ecef;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Header</h1>
    </div>
    <div class="content">
      <p>Content goes here...</p>
    </div>
  </div>
</body>
</html>

शेष स्क्रीन स्थान को भरने के लिए सीएसएस ग्रिड का उपयोग करना

ग्रिड लेआउट का उपयोग करके HTML और CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout</title>
  <style>
    body, html {
      margin: 0;
      height: 100%;
    }
    .container {
      display: grid;
      grid-template-rows: auto 1fr;
      height: 100vh;
    }
    .header {
      background-color: #f8f9fa;
      padding: 10px;
    }
    .content {
      background-color: #e9ecef;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Header</h1>
    </div>
    <div class="content">
      <p>Content goes here...</p>
    </div>
  </div>
</body>
</html>

पूर्ण ऊंचाई सामग्री लेआउट के लिए उन्नत तकनीकें

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

अधिक जटिल लेआउट के लिए, तत्वों की ऊंचाई को गतिशील रूप से गणना और समायोजित करने के लिए जावास्क्रिप्ट को नियोजित किया जा सकता है। इवेंट श्रोताओं को विंडो के आकार बदलने वाले इवेंट में संलग्न करके, जब भी विंडो का आकार बदलता है तो आप सामग्री div की ऊंचाई की पुनर्गणना कर सकते हैं। यह विधि अधिक लचीलापन प्रदान करती है और विभिन्न हेडर ऊंचाइयों और गतिशील सामग्री को संभाल सकती है। सीएसएस के साथ जावास्क्रिप्ट का संयोजन यह सुनिश्चित करता है कि आपका लेआउट विभिन्न स्क्रीन आकारों और सामग्री परिवर्तनों के लिए उत्तरदायी और अनुकूलनीय बना रहे, जो वेब अनुप्रयोगों में पूर्ण-ऊंचाई सामग्री प्रभागों के लिए एक मजबूत समाधान प्रदान करता है।

मैं गतिशील ऊंचाइयों के लिए कैल्क() फ़ंक्शन का उपयोग कैसे कर सकता हूं?
फ़ंक्शन आपको सीएसएस संपत्ति मान निर्धारित करने के लिए गणना करने की अनुमति देता है, जैसे 50px हेडर के हिसाब से।
CSS में vh इकाई क्या है?
यूनिट का मतलब व्यूपोर्ट ऊंचाई है, जहां व्यूपोर्ट की ऊंचाई के 1% के बराबर है, जो इसे प्रतिक्रियाशील डिज़ाइन के लिए उपयोगी बनाता है।
मैं डायनामिक हेडर ऊंचाई को कैसे संभालूं?
हेडर की ऊंचाई मापने के लिए जावास्क्रिप्ट का उपयोग करें और सामग्री डिव की ऊंचाई को तदनुसार समायोजित करें, यह सुनिश्चित करते हुए कि यह शेष स्थान को गतिशील रूप से भरता है।
क्या फ्लेक्सबॉक्स और ग्रिड को जोड़ा जा सकता है?
हां, आप गठबंधन कर सकते हैं और विभिन्न लेआउट आवश्यकताओं के लिए अपनी ताकत का लाभ उठाने के लिए एक ही प्रोजेक्ट के भीतर लेआउट।
मैं सामग्री div में स्क्रॉलेबिलिटी कैसे सुनिश्चित करूं?
सामग्री div सेट करें संपत्ति को जब सामग्री div की ऊंचाई से अधिक हो जाए तो स्क्रॉलबार जोड़ने के लिए।
लेआउट समायोजन के लिए जावास्क्रिप्ट का उपयोग करने के क्या लाभ हैं?
जावास्क्रिप्ट गतिशील सामग्री और अलग-अलग तत्व आकारों को संभालने के लिए वास्तविक समय समायोजन और लचीलापन प्रदान करता है, जिससे लेआउट की प्रतिक्रियाशीलता बढ़ती है।
क्या लेआउट के लिए तालिकाओं का उपयोग करने से बचना संभव है?
हाँ, आधुनिक CSS लेआउट तकनीकें पसंद हैं और पारंपरिक टेबल-आधारित लेआउट की तुलना में अधिक लचीले और प्रतिक्रियाशील समाधान प्रदान करते हैं।
मैं सीएसएस ग्रिड का उपयोग करके शेष ऊँचाई को div से कैसे भरूँ?
ग्रिड कंटेनर को इस पर सेट करें , दूसरी पंक्ति (सामग्री) के साथ सेट करें शेष ऊंचाई को भरने के लिए.
पूर्ण-ऊंचाई वाले लेआउट में 100vh इकाई क्या भूमिका निभाती है?
इकाई व्यूपोर्ट की पूरी ऊंचाई का प्रतिनिधित्व करती है, जिससे तत्वों को व्यूपोर्ट के आकार के आधार पर प्रतिक्रियाशील रूप से स्केल करने की अनुमति मिलती है।
क्या मैं प्रतिक्रियाशील लेआउट के लिए न्यूनतम-ऊंचाई का उपयोग कर सकता हूं?
हाँ, उपयोग कर रहा हूँ यह सुनिश्चित करता है कि एक तत्व न्यूनतम ऊंचाई बनाए रखता है, जो सामग्री अतिप्रवाह को प्रबंधित करने और लेआउट स्थिरता बनाए रखने में मदद कर सकता है।

रैपिंग अप लेआउट तकनीकें

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

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

HTML में कंटेंट डिव के साथ शेष स्क्रीन स्पेस भरना

आधुनिक सीएसएस लेआउट तकनीकों का उपयोग करना

शेष स्क्रीन स्थान को भरने के लिए डिव बनाने के लिए फ्लेक्सबॉक्स का उपयोग करना

शेष स्क्रीन स्थान को भरने के लिए सीएसएस ग्रिड का उपयोग करना

पूर्ण ऊंचाई सामग्री लेआउट के लिए उन्नत तकनीकें

रैपिंग अप लेआउट तकनीकें