CSS में फिक्स्ड साइडबार और स्क्रॉलेबल कंटेंट एरिया के साथ फुल-हाइट पेज बनाना

परिचय

उचित पोजिशनिंग के साथ ऊंचाई को 100% सेट करके, फिक्स्ड साइडबार और स्क्रॉलेबल कंटेंट एरिया वाला फुल-हाइट पेज बनाया जा सकता है। यह पैटर्न एडमिन डैशबोर्ड्स और ऐप लेआउट्स के लिए आम है।

उदाहरण: फिक्स्ड साइडबार लेआउट

<!DOCTYPE html>
<html>
<head>
  <style>
    .main {
      margin-left: 140px;
      font-size: 200%;
      padding: 0 3%;
    }
    section {
      height: 400px;
      background-color: tomato;
    }
    .sidebar {
      height: 100%;
      width: 140px;
      top: 0;
      left: 0;
      position: fixed;
      background-color: darkslategrey;
      padding-top: 20px;
    }
    .sidebar a {
      display: block;
      padding: 2% 4%;
      text-decoration: none;
      color: lightblue;
      font-size: 1.4em;
    }
    .sidebar a:hover {
      color: mistyrose;
      font-size: 1.8em;
      box-shadow: inset 0 0 15px rgba(0,0,0,0.6)
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <a href="#">Option a</a>
    <a href="#">Option b</a>
    <a href="#">Option c</a>
    <a href="#">Option d</a>
    <a href="#">Option e</a>
  </div>
  <div class="main">
    <h3>Example</h3>
    <article><p>Vivamus non elementum felis. Sed sagittis lectus ligula, maximus interdum eros lacinia non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculusmus. Maecenas id purus neque. Donec auctor mollis vehicula. Nulla luctus mauris ut gravida interdum. Aenean vel hendrerit massa, vel feugiat dui. </p>
    <img src="https://images.unsplash.com/photo-1611670159228-eff9d9e5b3a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" />
    <p>Phasellus ac felis consectetur lectus varius gravida ac in nunc. Suspendisse ut velit sagittis, mattis nibh eu, semper massa. Maecenas in ligula fringilla, tristique libero sit amet, convallis ex. Sed condimentum id nulla non dignissim. Vestibulum sollicitudin eros id varius ornare.</p></article>
    <section></section>
  </div>
</body>
</html>

मुख्य तकनीकें

• position: fixed साइडबार को व्यूपोर्ट के सापेक्ष रखता है
• height: 100% फुल व्यूपोर्ट ऊंचाई सुनिश्चित करता है (HTML/बॉडी पर height: 100% की आवश्यकता)
• margin-left मुख्य कंटेंट पर साइडबार चौड़ाई के बराबर
• overflow-y: auto मुख्य कंटेंट पर (निहित) स्क्रॉलिंग सक्षम करता है

मॉडर्न एन्हांस्ड वर्जन

<!DOCTYPE html>
<html lang="hi">
<head>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; font-family: system-ui, sans-serif; }
    .layout { display: flex; min-height: 100vh; }
    .sidebar {
      width: 280px;
      min-width: 280px;
      background: #1e293b;
      color: #e2e8f0;
      padding: 1.5rem 0;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
      flex-shrink: 0;
    }
    .sidebar-header { padding: 0 1.5rem 1.5rem; border-bottom: 1px solid #334155; }
    .sidebar-nav a {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.875rem 1.5rem;
      color: #94a3b8;
      text-decoration: none;
      transition: background 0.2s, color 0.2s;
    }
    .sidebar-nav a:hover,
    .sidebar-nav a.active {
      background: #0f172a;
      color: #38bdf8;
    }
    .main-content {
      flex: 1;
      min-width: 0; /* फ्लेक्स श्रिंकिंग की अनुमति देता है */
      background: #f8fafc;
      overflow-y: auto;
      padding: 2rem;
    }
    @media (max-width: 768px) {
      .sidebar {
        position: fixed;
        left: -280px;
        z-index: 1000;
        transition: left 0.3s ease;
        box-shadow: 4px 0 20px rgba(0,0,0,0.15);
      }
      .sidebar.open { left: 0; }
      .main-content { margin-left: 0; }
    }
  </style>
</head>
<body>
  <div class="layout">
    <aside class="sidebar" id="sidebar">
      <div class="sidebar-header"><h2>डैशबोर्ड</h2></div>
      <nav class="sidebar-nav">
        <a href="#" class="active">🏠 डैशबोर्ड</a>
        <a href="#">📊 एनालिटिक्स</a>
        <a href="#">👥 उपयोगकर्ता</a>
        <a href="#">⚙️ सेटिंग्स</a>
      </nav>
    </aside>
    <main class="main-content">
      <header style="margin-bottom: 2rem;">
        <button id="menu-toggle" style="display:none; padding:0.5rem 1rem; background:#3b82f6; color:white; border:none; border-radius:4px;">☰ मेन्यू</button>
        <h1>डैशबोर्ड</h1>
      </header>
      <article>
        <p>यह एक मॉडर्न, रिस्पॉन्सिव फिक्स्ड साइडबार लेआउट है जिसमें मोबाइल टॉगल सपोर्ट है।</p>
      </article>
    </main>
  </div>
  <script>
    const toggle = document.getElementById('menu-toggle');
    const sidebar = document.getElementById('sidebar');
    if (window.innerWidth <= 768) toggle.style.display = 'block';
    toggle?.addEventListener('click', () => sidebar.classList.toggle('open'));
    window.addEventListener('resize', () => {
      toggle.style.display = window.innerWidth <= 768 ? 'block' : 'none';
      if (window.innerWidth > 768) sidebar.classList.remove('open');
    });
  </script>
</body>
</html>

बेस्ट प्रैक्टिसेज

• box-sizing: border-box ग्लोबली उपयोग करें
• मुख्य कंटेंट पर min-width: 0 फ्लेक्सबॉक्स में ओवरफ्लो समस्याओं को रोकता है
• मोबाइल पर position: sticky (डेस्कटॉप) + position: fixed के लिए मीडिया क्वेरीज का उपयोग करें
• मोबाइल पर बॉडी स्क्रॉल लॉक के लिए ओवरले बैकड्रॉप जोड़ें
• फोकस ट्रैपिंग और ARIA के साथ एक्सेसिबिलिटी सुनिश्चित करें