HTML मध्ये कंटेंट डिव्हसह उर्वरित स्क्रीन जागा भरणे

Jules David
मंगळवार, १६ जुलै, २०२४ रोजी ६:४१:३३ म.उ.
CSS

पूर्ण उंचीच्या सामग्रीसाठी लेआउट ऑप्टिमाइझ करणे

संपूर्ण स्क्रीन स्पेस प्रभावीपणे वापरणारे वेब ॲप्लिकेशन तयार करणे हे एक सामान्य आव्हान आहे. सामग्री संपूर्ण स्क्रीनची उंची भरते याची खात्री करण्यासाठी, विशेषत: डायनॅमिक शीर्षलेख असताना, काळजीपूर्वक नियोजन आणि अंमलबजावणी आवश्यक आहे. हेडरमध्ये सहसा लोगो आणि खाते माहिती यासारखे आवश्यक घटक असतात आणि त्याची उंची बदलू शकते.

टेबलवर विसंबून न राहता सामग्री div ने उर्वरित स्क्रीन जागा व्यापावी हे ध्येय आहे. हे अवघड असू शकते, विशेषतः जेव्हा सामग्री div मधील घटकांना टक्केवारी उंचीशी जुळवून घेणे आवश्यक असते. हा लेख आधुनिक CSS तंत्रांचा वापर करून हा लेआउट कसा मिळवायचा हे शोधतो.

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

आधुनिक CSS मांडणी तंत्र वापरणे

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

दुसऱ्या स्क्रिप्टमध्ये, लेआउटसाठी कार्यरत आहे. द वर्ग सेट केला आहे सह grid-template-rows: auto 1fr. हे दोन ओळींसह ग्रिड तयार करते: पहिली पंक्ती (शीर्षलेख) आपोआप तिची उंची समायोजित करते आणि दुसरी पंक्ती (सामग्री) उर्वरित जागा भरते. फ्लेक्सबॉक्स उदाहरणाप्रमाणे, सामग्री div मध्ये एक आहे अतिप्रवाह सामग्री सुंदरपणे हाताळण्यासाठी मालमत्ता. दोन्ही पद्धती टेबल्सची गरज दूर करतात, लवचिक आणि प्रतिसादात्मक डिझाइन प्राप्त करण्यासाठी आधुनिक CSS लेआउट तंत्राचा लाभ घेतात जे भिन्न शीर्षलेख उंचीशी जुळवून घेते आणि पृष्ठाच्या उर्वरित भागामध्ये सामग्री भरते याची खात्री करते.

उर्वरित स्क्रीन स्पेस डिव्ह फिल करण्यासाठी फ्लेक्सबॉक्स वापरणे

Flexbox वापरून 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>

उर्वरित स्क्रीन स्पेस भरण्यासाठी CSS ग्रिड वापरणे

ग्रिड लेआउट वापरून HTML आणि CSS

१

पूर्ण उंची सामग्री मांडणीसाठी प्रगत तंत्रे

याची खात्री करण्यासाठी आणखी एक प्रभावी पद्धत वापरून उर्वरित स्क्रीन जागा भरते सह संयोजनात युनिट . द १५ युनिट व्ह्यूपोर्टच्या उंचीच्या टक्केवारीचे प्रतिनिधित्व करते, ते प्रतिसादात्मक डिझाइनसाठी उपयुक्त बनवते. सामग्री div ची उंची सेट करून , तुम्ही हेडरच्या उंचीवर आधारित उंची गतिमानपणे समायोजित करू शकता. हा दृष्टीकोन निश्चित किंवा ज्ञात उंची असलेल्या शीर्षलेखांसाठी चांगले कार्य करते, सामग्री div नेहमी उर्वरित जागा भरते याची खात्री करून. याव्यतिरिक्त, वापरून युनिट्स विविध स्क्रीन आकारांमध्ये सुसंगत मांडणी वर्तन राखण्यात मदत करतात.

अधिक जटिल लेआउटसाठी, घटकांची उंची डायनॅमिकपणे मोजण्यासाठी आणि समायोजित करण्यासाठी JavaScript वापरता येते. विंडोच्या आकार बदलण्याच्या इव्हेंटमध्ये इव्हेंट श्रोत्यांना संलग्न करून, जेव्हा जेव्हा विंडोचा आकार बदलतो तेव्हा तुम्ही सामग्री div ची उंची पुन्हा मोजू शकता. ही पद्धत अधिक लवचिकता प्रदान करते आणि भिन्न हेडर उंची आणि डायनॅमिक सामग्री हाताळू शकते. JavaScript चे CSS सह संयोजन केल्याने तुमचा लेआउट प्रतिसादात्मक राहील आणि विविध स्क्रीन आकार आणि सामग्री बदलांसाठी अनुकूल राहील याची खात्री करते, वेब अनुप्रयोगांमध्ये पूर्ण-उंची सामग्री divs साठी एक मजबूत समाधान ऑफर करते.

  1. डायनॅमिक हाइट्ससाठी मी कॅल्क() फंक्शन कसे वापरू शकतो?
  2. द फंक्शन तुम्हाला CSS प्रॉपर्टी व्हॅल्यूज निर्धारित करण्यासाठी गणना करण्यास अनुमती देते, जसे की 50px शीर्षलेखासाठी खाते.
  3. CSS मध्ये vh युनिट काय आहे?
  4. द युनिट म्हणजे व्ह्यूपोर्टची उंची, कुठे व्ह्यूपोर्टच्या उंचीच्या 1% च्या बरोबरीने, ते प्रतिसादात्मक डिझाइनसाठी उपयुक्त बनवते.
  5. मी डायनॅमिक हेडर हाइट्स कसे हाताळू?
  6. हेडरची उंची मोजण्यासाठी JavaScript वापरा आणि त्यानुसार सामग्री div उंची समायोजित करा, हे सुनिश्चित करून ते उर्वरित जागा गतिशीलपणे भरेल.
  7. फ्लेक्सबॉक्स आणि ग्रिड एकत्र केले जाऊ शकतात?
  8. होय, आपण एकत्र करू शकता आणि विविध लेआउट आवश्यकतांसाठी त्यांच्या सामर्थ्याचा लाभ घेण्यासाठी समान प्रकल्पातील लेआउट.
  9. मी सामग्री div मध्ये स्क्रोल करण्यायोग्यता कशी सुनिश्चित करू?
  10. सामग्री div सेट करा करण्यासाठी मालमत्ता जेव्हा सामग्री div ची उंची ओलांडते तेव्हा स्क्रोलबार जोडण्यासाठी.
  11. लेआउट ऍडजस्टमेंटसाठी JavaScript वापरण्याचे काय फायदे आहेत?
  12. JavaScript रीअल-टाइम ऍडजस्टमेंट आणि डायनॅमिक सामग्री आणि विविध घटक आकार हाताळण्यासाठी लवचिकता प्रदान करते, लेआउटची प्रतिसादक्षमता वाढवते.
  13. लेआउटसाठी टेबल वापरणे टाळणे शक्य आहे का?
  14. होय, आधुनिक सीएसएस लेआउट तंत्र जसे आणि पारंपारिक सारणी-आधारित मांडणीपेक्षा अधिक लवचिक आणि प्रतिसादात्मक उपाय ऑफर करतात.
  15. CSS ग्रिड वापरून उरलेली उंची मी div कशी भरू शकतो?
  16. ग्रिड कंटेनर वर सेट करा , दुसरी पंक्ती (सामग्री) वर सेट केली आहे उर्वरित उंची भरण्यासाठी.
  17. पूर्ण-उंची लेआउटमध्ये 100vh युनिट कोणती भूमिका बजावते?
  18. द युनिट व्ह्यूपोर्टची संपूर्ण उंची दर्शवते, ज्यामुळे घटकांना व्ह्यूपोर्टच्या आकाराच्या आधारे प्रतिसादात्मकपणे मोजता येते.
  19. प्रतिसादात्मक मांडणीसाठी मी किमान-उंची वापरू शकतो का?
  20. होय, वापरून घटक किमान उंची राखतो याची खात्री करते, जे सामग्री ओव्हरफ्लो व्यवस्थापित करण्यात आणि लेआउटची सुसंगतता राखण्यात मदत करू शकते.

मांडणी तंत्र गुंडाळणे

आधुनिक CSS तंत्रांचा लाभ घेऊन जसे की आणि , वेब डेव्हलपर प्रभावीपणे लेआउट तयार करू शकतात जेथे सामग्री div उर्वरित स्क्रीन जागा भरते, प्रतिसाद आणि अनुकूलता सुनिश्चित करते. या पद्धती कालबाह्य टेबल-आधारित लेआउटची आवश्यकता दूर करतात आणि डिझाइनमध्ये अधिक लवचिकता प्रदान करतात.

सारखे CSS युनिट्स एकत्र करणे आणि कार्ये जसे डायनॅमिक ऍडजस्टमेंटसाठी JavaScript सह लेआउटची प्रतिसादक्षमता आणखी वाढवू शकते. हे विविध उपकरणे आणि स्क्रीन आकारांमध्ये अखंड वापरकर्ता अनुभव सुनिश्चित करते, वेब अनुप्रयोग अधिक मजबूत आणि वापरकर्ता-अनुकूल बनवते.