HTML और CSS का उपयोग करके साइडबार और मुख्य कंटेंट एरिया वाला पेज बनाना

परिचय

HTML और बॉडी का आकार 100% सेट करके, फ्लूइड साइडबार और मुख्य कंटेंट एरिया वाला एक वेबपेज बनाया जाता है। यह क्लासिक लेआउट पैटर्न डैशबोर्ड्स, एडमिन पैनल्स, और डॉक्यूमेंटेशन साइट्स के लिए आदर्श है।

उदाहरण: टेबल-आधारित लेआउट

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      height: 100%;
      color: white;
      font-size: 2em;
      line-height: 200px;
    }
    #parent {
      display: table;
      width: 100%;
      height: 100%;
    }
    #side {
      display: table-cell;
      background-color: turquoise;
      width: 20%;
      vertical-align: top;
      box-shadow: inset 0 0 10px black;
    }
    #main {
      display: table-cell;
      width: 80%;
      background: url("https://images.unsplash.com/photo-1611944444060-b50a1d80cfe6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixlib=rb-1.2.1&q=80&w=600");
    }
  </style>
</head>
<body>
  <div id="parent">
    <div id="side">Side</div>
    <div id="main">Main</div>
  </div>
</body>
</html>

मॉडर्न विकल्प: फ्लेक्सबॉक्स लेआउट

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      font-family: system-ui, sans-serif;
    }
    .app-layout {
      display: flex;
      height: 100%;
    }
    .sidebar {
      width: 260px;
      min-width: 260px;
      background: #2c3e50;
      color: white;
      padding: 1.5rem;
      overflow-y: auto;
    }
    .main-content {
      flex: 1;
      background: #f8f9fa;
      overflow-y: auto;
      padding: 2rem;
    }
    .sidebar nav a {
      display: block;
      color: #bdc3c7;
      text-decoration: none;
      padding: 0.75rem 1rem;
      border-radius: 4px;
      margin: 0.25rem 0;
      transition: background 0.2s, color 0.2s;
    }
    .sidebar nav a:hover {
      background: #34495e;
      color: white;
    }
    .sidebar nav a.active {
      background: #3498db;
      color: white;
    }
  </style>
</head>
<body>
  <div class="app-layout">
    <aside class="sidebar">
      <h2>मेन्यू</h2>
      <nav>
        <a href="#" class="active">डैशबोर्ड</a>
        <a href="#">एनालिटिक्स</a>
        <a href="#">उपयोगकर्ता</a>
        <a href="#">सेटिंग्स</a>
      </nav>
    </aside>
    <main class="main-content">
      <h1>डैशबोर्ड</h1>
      <p>मुख्य कंटेंट एरिया...</p>
    </main>
  </div>
</body>
</html>

मॉडर्न विकल्प: CSS ग्रिड लेआउट

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-layout {
      display: grid;
      grid-template-columns: 260px 1fr;
      grid-template-rows: auto 1fr;
      min-height: 100vh;
    }
    .header { grid-column: 1 / -1; background: #fff; border-bottom: 1px solid #eee; padding: 1rem 2rem; }
    .sidebar { background: #2c3e50; color: white; padding: 1.5rem; }
    .main { background: #f8f9fa; padding: 2rem; overflow-y: auto; }
  </style>
</head>
<body>
  <div class="grid-layout">
    <header class="header">हेडर</header>
    <aside class="sidebar">साइडबार</aside>
    <main class="main">मुख्य कंटेंट</main>
  </div>
</body>
</html>

रिस्पॉन्सिव व्यवहार

@media (max-width: 768px) {
  .app-layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    min-width: auto;
    border-right: none;
    border-bottom: 1px solid #34495e;
  }
  .grid-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: none; /* या हैमबर्गर मेन्यू के साथ टॉगल करें */
  }
}