HTML میں مواد کی تقسیم کے ساتھ اسکرین کی باقی جگہ کو بھرنا

Jules David
منگل، 16 جولائی، 2024 7:17:28 PM
CSS

مکمل اونچائی والے مواد کے لیے ترتیب کو بہتر بنانا

ایک ویب ایپلیکیشن بنانا جو پوری سکرین کی جگہ کو مؤثر طریقے سے استعمال کرے ایک عام چیلنج ہے۔ اس بات کو یقینی بنانا کہ مواد پوری اسکرین کی اونچائی کو بھرتا ہے، خاص طور پر جب ایک متحرک ہیڈر ہو، محتاط منصوبہ بندی اور عمل درآمد کی ضرورت ہے۔ ہیڈر میں اکثر ضروری عناصر ہوتے ہیں جیسے لوگو اور اکاؤنٹ کی معلومات، اور اس کی اونچائی مختلف ہو سکتی ہے۔

مقصد یہ ہے کہ ٹیبل پر بھروسہ کیے بغیر مواد div کو اسکرین کی باقی جگہ پر قبضہ کر لیا جائے۔ یہ مشکل ہوسکتا ہے، خاص طور پر جب مواد div کے اندر موجود عناصر کو فیصد کی بلندیوں کے مطابق ڈھالنے کی ضرورت ہو۔ یہ مضمون دریافت کرتا ہے کہ جدید CSS تکنیکوں کا استعمال کرتے ہوئے اس ترتیب کو کیسے حاصل کیا جائے۔

کمانڈ تفصیل
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. یہ دو قطاروں کے ساتھ ایک گرڈ بناتا ہے: پہلی قطار (ہیڈر) خود بخود اپنی اونچائی کو ایڈجسٹ کرتی ہے، اور دوسری قطار (مواد) باقی جگہ کو بھرتی ہے۔ Flexbox مثال کی طرح، مواد div میں ایک ہے۔ اوور فلو مواد کو احسن طریقے سے سنبھالنے کے لیے پراپرٹی۔ دونوں طریقے میزوں کی ضرورت کو ختم کرتے ہیں، جدید CSS لے آؤٹ تکنیکوں کا فائدہ اٹھاتے ہوئے ایک لچکدار اور ذمہ دار ڈیزائن حاصل کرنے کے لیے جو مختلف ہیڈر کی اونچائیوں کو ایڈجسٹ کرتا ہے اور اس بات کو یقینی بناتا ہے کہ مواد باقی صفحہ کو بھرتا ہے۔

فلیکس باکس کا استعمال کرتے ہوئے ایک Div فل بقیہ اسکرین اسپیس بنانے کے لیے

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 گرڈ کا استعمال

گرڈ لے آؤٹ کا استعمال کرتے ہوئے ایچ ٹی ایم ایل اور سی ایس ایس

<!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 کی اونچائی کا دوبارہ حساب لگا سکتے ہیں۔ یہ طریقہ زیادہ لچک فراہم کرتا ہے اور مختلف ہیڈر کی بلندیوں اور متحرک مواد کو سنبھال سکتا ہے۔ JavaScript کو CSS کے ساتھ ملانا اس بات کو یقینی بناتا ہے کہ آپ کا لے آؤٹ مختلف اسکرین سائزز اور مواد کی تبدیلیوں کے لیے ذمہ دار اور موافق رہے، جو ویب ایپلیکیشنز میں مکمل اونچائی والے مواد کی تقسیم کے لیے ایک مضبوط حل پیش کرتا ہے۔

  1. میں calc() فنکشن کو متحرک بلندیوں کے لیے کیسے استعمال کر سکتا ہوں؟
  2. دی فنکشن آپ کو CSS پراپرٹی ویلیوز کا تعین کرنے کے لیے حسابات کرنے کی اجازت دیتا ہے، جیسے 50px ہیڈر کے حساب سے۔
  3. سی ایس ایس میں وی ایچ یونٹ کیا ہے؟
  4. دی یونٹ ویو پورٹ کی اونچائی کے لئے کھڑا ہے، جہاں ویوپورٹ کی اونچائی کے 1% کے برابر ہے، جو اسے ریسپانسیو ڈیزائن کے لیے مفید بناتا ہے۔
  5. میں متحرک ہیڈر کی بلندیوں کو کیسے ہینڈل کروں؟
  6. ہیڈر کی اونچائی کی پیمائش کرنے کے لیے JavaScript کا استعمال کریں اور مواد کی div کی اونچائی کو اس کے مطابق ایڈجسٹ کریں، اس بات کو یقینی بناتے ہوئے کہ یہ باقی جگہ کو متحرک طور پر بھرتا ہے۔
  7. کیا فلیکس باکس اور گرڈ کو ملایا جا سکتا ہے؟
  8. ہاں، آپ اکٹھا کر سکتے ہیں۔ اور مختلف ترتیب کی ضروریات کے لیے اپنی طاقت کا فائدہ اٹھانے کے لیے ایک ہی پروجیکٹ کے اندر لے آؤٹ۔
  9. میں مواد div میں اسکرول ایبلٹی کو کیسے یقینی بنا سکتا ہوں؟
  10. مواد div's سیٹ کریں جائیداد کو جب مواد div کی اونچائی سے زیادہ ہو جائے تو اسکرول بار شامل کرنے کے لیے۔
  11. لے آؤٹ ایڈجسٹمنٹ کے لیے جاوا اسکرپٹ استعمال کرنے کے کیا فوائد ہیں؟
  12. JavaScript متحرک مواد اور مختلف عناصر کے سائز کو سنبھالنے کے لیے ریئل ٹائم ایڈجسٹمنٹ اور لچک فراہم کرتا ہے، لے آؤٹ کی ردعمل کو بڑھاتا ہے۔
  13. کیا ترتیب کے لیے میزیں استعمال کرنے سے بچنا ممکن ہے؟
  14. جی ہاں، جدید سی ایس ایس لے آؤٹ تکنیک جیسے اور روایتی ٹیبل پر مبنی ترتیب سے زیادہ لچکدار اور ذمہ دار حل پیش کرتے ہیں۔
  15. میں سی ایس ایس گرڈ کا استعمال کرتے ہوئے بقیہ اونچائی کو کیسے بھر سکتا ہوں؟
  16. گرڈ کنٹینر کو سیٹ کریں۔ , دوسری قطار کے ساتھ (مواد) پر سیٹ ہے۔ باقی اونچائی کو بھرنے کے لئے.
  17. مکمل اونچائی کی ترتیب میں 100vh یونٹ کیا کردار ادا کرتا ہے؟
  18. دی یونٹ ویو پورٹ کی پوری اونچائی کی نمائندگی کرتا ہے، جس سے عناصر کو ویو پورٹ کے سائز کی بنیاد پر جوابی پیمائش کرنے کی اجازت ملتی ہے۔
  19. کیا میں جوابی ترتیب کے لیے کم سے کم اونچائی کا استعمال کر سکتا ہوں؟
  20. جی ہاں، استعمال کرتے ہوئے اس بات کو یقینی بناتا ہے کہ عنصر کم از کم اونچائی کو برقرار رکھے، جو مواد کے بہاؤ کو منظم کرنے اور ترتیب کی مستقل مزاجی کو برقرار رکھنے میں مدد کر سکتا ہے۔

لے آؤٹ تکنیکوں کو لپیٹنا

جدید سی ایس ایس تکنیکوں کا فائدہ اٹھا کر جیسے اور ، ویب ڈویلپر مؤثر طریقے سے لے آؤٹ بنا سکتے ہیں جہاں ایک مواد div اسکرین کی باقی جگہ کو بھرتا ہے، ردعمل اور موافقت کو یقینی بناتا ہے۔ یہ طریقے فرسودہ ٹیبل پر مبنی ترتیب کی ضرورت کو ختم کرتے ہیں اور ڈیزائن میں مزید لچک فراہم کرتے ہیں۔

سی ایس ایس یونٹس کو یکجا کرنا جیسے اور افعال جیسے متحرک ایڈجسٹمنٹ کے لیے JavaScript کے ساتھ لے آؤٹ کی ردعمل کو مزید بڑھا سکتا ہے۔ یہ ویب ایپلیکیشن کو مزید مضبوط اور صارف دوست بناتے ہوئے مختلف آلات اور اسکرین کے سائز پر بغیر کسی رکاوٹ کے صارف کے تجربے کو یقینی بناتا ہے۔