ملء مساحة الشاشة المتبقية باستخدام قسم المحتوى في HTML

Jules David
الثلاثاء، ١٦ يوليو ٢٠٢٤ ٥:٤٣:٤٣ م
CSS

تحسين التخطيطات للمحتوى كامل الارتفاع

يعد إنشاء تطبيق ويب يستخدم مساحة الشاشة بأكملها بشكل فعال تحديًا شائعًا. يتطلب التأكد من أن المحتوى يملأ ارتفاع الشاشة بأكملها، خاصة عندما يكون هناك رأس ديناميكي، تخطيطًا وتنفيذًا دقيقًا. غالبًا ما يحتوي الرأس على عناصر أساسية مثل الشعارات ومعلومات الحساب، ويمكن أن يختلف ارتفاعه.

الهدف هو جعل قسم المحتوى يشغل مساحة الشاشة المتبقية دون الاعتماد على الجداول. قد يكون هذا أمرًا صعبًا، خاصة عندما تحتاج العناصر الموجودة داخل قسم المحتوى إلى التكيف مع النسبة المئوية للارتفاعات. تستكشف هذه المقالة كيفية تحقيق هذا التخطيط باستخدام تقنيات CSS الحديثة.

يأمر وصف
flex-direction: column; يضبط المحور الرئيسي للحاوية المرنة ليكون عموديًا، مما يؤدي إلى تكديس الأطفال من الأعلى إلى الأسفل.
flex: 1; يسمح للعنصر المرن بالنمو وملء المساحة المتوفرة داخل الحاوية المرنة.
grid-template-rows: auto 1fr; يحدد تخطيط الشبكة بصفين، حيث يكون للصف الأول ارتفاع تلقائي ويشغل الصف الثاني المساحة المتبقية.
overflow: auto; لتمكين التمرير إذا تجاوز المحتوى الحاوية، مع إضافة أشرطة التمرير حسب الحاجة.
height: 100vh; يضبط ارتفاع العنصر على 100% من ارتفاع إطار العرض.
grid-template-rows يحدد حجم كل صف في تخطيط الشبكة.
display: flex; يحدد حاوية مرنة، مما يتيح نموذج تخطيط flexbox لأطفاله.

استخدام تقنيات تخطيط CSS الحديثة

في النص الأول نستخدم لصنع ملء مساحة الشاشة المتبقية. ال تم ضبط الفصل على display: flex و . يؤدي هذا إلى تكديس الرأس والمحتوى عموديًا. الرأس له ارتفاع ثابت، بينما يستخدم المحتوى لملء المساحة المتبقية. يضمن هذا الأسلوب ضبط div للمحتوى ديناميكيًا ليحتل أي ارتفاع متبقي، بغض النظر عن ارتفاع الرأس. ال تسمح خاصية div للمحتوى بأن يكون قابلاً للتمرير إذا تجاوز المحتوى المساحة القابلة للعرض، مما يحافظ على تخطيط نظيف دون مشكلات تجاوز السعة.

وفي السيناريو الثاني يتم استخدامه للتخطيط. ال تم ضبط الفصل على مع grid-template-rows: auto 1fr. يؤدي هذا إلى إنشاء شبكة مكونة من صفين: الصف الأول (الرأس) يضبط ارتفاعه تلقائيًا، والصف الثاني (المحتوى) يملأ المساحة المتبقية. على غرار مثال Flexbox، يحتوي قسم المحتوى على خاصية التعامل مع المحتوى الفائض بأمان. تلغي كلتا الطريقتين الحاجة إلى الجداول، مع الاستفادة من تقنيات تخطيط CSS الحديثة لتحقيق تصميم مرن وسريع الاستجابة يتكيف مع ارتفاعات الرأس المختلفة ويضمن ملء المحتوى لبقية الصفحة.

استخدام Flexbox لجعل Div يملأ مساحة الشاشة المتبقية

HTML وCSS باستخدام Flexbox

<!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 باستخدام تخطيط الشبكة

<!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 للمحتوى ، يمكنك ضبط الارتفاع ديناميكيًا بناءً على ارتفاع الرأس. يعمل هذا الأسلوب بشكل جيد مع الرؤوس ذات الارتفاعات الثابتة أو المعروفة، مما يضمن أن قسم المحتوى يملأ دائمًا المساحة المتبقية. بالإضافة إلى ذلك، باستخدام تساعد الوحدات في الحفاظ على سلوك التخطيط المتسق عبر أحجام الشاشات المختلفة.

بالنسبة للتخطيطات الأكثر تعقيدًا، يمكن استخدام JavaScript لحساب ارتفاع العناصر وضبطه ديناميكيًا. من خلال ربط مستمعي الأحداث بحدث تغيير حجم النافذة، يمكنك إعادة حساب ارتفاع قسم المحتوى كلما تغير حجم النافذة. توفر هذه الطريقة مرونة أكبر ويمكنها التعامل مع ارتفاعات الرأس المختلفة والمحتوى الديناميكي. يضمن الجمع بين JavaScript وCSS أن يظل تخطيطك مستجيبًا وقابلاً للتكيف مع أحجام الشاشات المختلفة وتغييرات المحتوى، مما يوفر حلاً قويًا لأقسام المحتوى ذات الارتفاع الكامل في تطبيقات الويب.

  1. كيف يمكنني استخدام الدالة calc() للارتفاعات الديناميكية؟
  2. ال تسمح لك الدالة بإجراء عمليات حسابية لتحديد قيم خصائص CSS، مثل لحساب رأس 50px.
  3. ما هي وحدة vh في CSS؟
  4. ال الوحدة تعني ارتفاع منفذ العرض، حيث يساوي 1% من ارتفاع إطار العرض، مما يجعله مفيدًا للتصميم سريع الاستجابة.
  5. كيف أتعامل مع ارتفاعات الرأس الديناميكية؟
  6. استخدم JavaScript لقياس ارتفاع الرأس وضبط ارتفاع قسم المحتوى وفقًا لذلك، مما يضمن أنه يملأ المساحة المتبقية ديناميكيًا.
  7. هل يمكن الجمع بين Flexbox وGrid؟
  8. نعم يمكنك الجمع و تخطيطات داخل نفس المشروع للاستفادة من نقاط قوتها لتلبية متطلبات التخطيط المختلفة.
  9. كيف أضمن إمكانية التمرير في قسم المحتوى؟
  10. قم بتعيين عناصر div الخاصة بالمحتوى الملكية ل لإضافة أشرطة التمرير عندما يتجاوز المحتوى ارتفاع div.
  11. ما فوائد استخدام JavaScript لتعديلات التخطيط؟
  12. توفر JavaScript تعديلات ومرونة في الوقت الفعلي للتعامل مع المحتوى الديناميكي وأحجام العناصر المختلفة، مما يعزز استجابة التخطيط.
  13. هل من الممكن تجنب استخدام الجداول للتخطيط؟
  14. نعم، تقنيات تخطيط CSS الحديثة مثل و تقديم حلول أكثر مرونة واستجابة من التخطيطات التقليدية القائمة على الجداول.
  15. كيف يمكنني جعل div يملأ الارتفاع المتبقي باستخدام CSS Grid؟
  16. اضبط حاوية الشبكة على ، مع ضبط الصف الثاني (المحتوى) على لملء الارتفاع المتبقي.
  17. ما هو الدور الذي تلعبه وحدة 100vh في التخطيطات ذات الارتفاع الكامل؟
  18. ال تمثل الوحدة الارتفاع الكامل لإطار العرض، مما يسمح للعناصر بالقياس بشكل مستجيب بناءً على حجم إطار العرض.
  19. هل يمكنني استخدام الحد الأدنى للارتفاع للتخطيطات سريعة الاستجابة؟
  20. نعم باستخدام يضمن احتفاظ العنصر بالحد الأدنى من الارتفاع، مما يمكن أن يساعد في إدارة تجاوز المحتوى والحفاظ على تناسق التخطيط.

التفاف تقنيات التخطيط

من خلال الاستفادة من تقنيات CSS الحديثة مثل و ، يمكن لمطوري الويب إنشاء تخطيطات بشكل فعال حيث يملأ قسم المحتوى مساحة الشاشة المتبقية، مما يضمن الاستجابة والقدرة على التكيف. تلغي هذه الأساليب الحاجة إلى التخطيطات القديمة المستندة إلى الجداول وتوفر المزيد من المرونة في التصميم.

الجمع بين وحدات CSS مثل ووظائف مثل باستخدام JavaScript لإجراء التعديلات الديناميكية يمكن أن يزيد من تحسين استجابة التخطيط. ويضمن ذلك تجربة مستخدم سلسة عبر مختلف الأجهزة وأحجام الشاشات، مما يجعل تطبيق الويب أكثر قوة وسهولة في الاستخدام.