ویب سائٹ کے ڈیزائن میں عام طور پر پوچھا سوال یہ ہے کہ "آپ ایک عنصر کی اونچائی 100٪ تک کس طرح مقرر کرتے ہیں"؟
یہ ایک آسان جواب کی طرح لگتا ہے. آپ آسانی سے 100 فی صد تک عنصر کی اونچائی کو سیٹ کرنے کے لئے سی ایس ایس کا استعمال کرتے ہیں، لیکن یہ ہمیشہ اس عنصر کو مکمل براؤزر ونڈو کو فٹ کرنے کے لئے نہیں رکھتا ہے. آتے ہیں کہ یہ کیوں ہوتا ہے اور اس بصری طرز کو حاصل کرنے کے لئے آپ کیا کر سکتے ہیں.
پکسلز اور فی صد
جب آپ سی ایس ایس پراپرٹی اور پکسلز کا استعمال کرتے ہوئے ایک قدر کا عنصر استعمال کرکے عنصر کی اونچائی کی وضاحت کرتے ہیں، تو اس عنصر براؤزر میں بہت عمودی جگہ لے جائے گی.
مثال کے طور پر، اونچائی کے ساتھ ایک پیراگراف: 100px؛ آپ کے ڈیزائن میں عمودی خلائی 100 پکسلز لے جائیں گے. یہ بات نہیں ہے کہ آپ کے براؤزر کی ونڈو کتنی بڑی ہے، یہ عنصر 100 پونڈ اونچائی میں ہو گی.
فی صد پکسلس سے مختلف کام کرتے ہیں. W3C تفصیلات کے مطابق، فی صد اتھارٹی کنٹینر کی اونچائی کے حوالے سے شمار کی جاتی ہے. لہذا اگر آپ اونچائی کے ساتھ ایک پیراگراف ڈالیں: 50٪؛ ایک پی ڈی کے اندر 100px کی اونچائی کے ساتھ، پیراگراف اونچائی میں 50 پکسلز ہو جائے گا، جو اس کے والدین عنصر کا 50٪ ہے.
کیوں فی صد ہائٹس ناکام
اگر آپ کسی ویب صفحہ کو ڈیزائن کر رہے ہیں، اور آپ کے پاس ایک کالم ہے جسے آپ ونڈو کی مکمل اونچائی میں لے جانا چاہتے ہیں، تو قدرتی ٹھنڈا اونچائی میں اضافہ کرنا ہے: 100٪؛ اس عنصر پر. سب کے بعد، اگر آپ چوڑائی چوڑائی کو مقرر کرتے ہیں تو: 100٪؛ عنصر صفحہ کے مکمل افقی جگہ لے جائے گا، تو اونچائی اسی طرح کام کرنا چاہئے، صحیح؟ بدقسمتی سے، یہ معاملہ بالکل نہیں ہے.
یہ سمجھنے کے لئے کیوں کہ یہ کیوں ہوتا ہے، آپ کو یہ سمجھنا ضروری ہے کہ براؤزر اونچائی اور چوڑائی کی وضاحت کرتے ہیں. ویب براؤزر کل دستیاب چوڑائی کا ایک فنکشن کے طور پر حساب کرتے ہیں کہ براؤزر ونڈو کھولنے کے وسیع انداز میں. اگر آپ اپنے دستاویزات پر کسی بھی چوڑائی کے اقدار کو مقرر نہیں کرتے ہیں تو براؤزر خود کار طریقے سے ونڈو کے پوری چوڑائی کو بھرنے کے لئے خود کار طریقے سے بہاؤ کرے گا (100٪ چوڑائی ڈیفالٹ ہے).
لمبائی سے اونچائی کی قیمت مختلف ہوتی ہے. حقیقت میں، براؤزر سب سے اونچائی کا اندازہ نہیں کرتے جب تک کہ مواد اتنی لمبی حد تک نہیں ہے کہ اس کے پاس پاسپورٹ سے باہر جاتا ہے (اس طرح اسکرال سلاخوں کی ضرورت ہوتی ہے) یا اگر ویب ڈیزائنر صفحہ پر عنصر کے لئے مطلق اونچائی مقرر کرے. دوسری صورت میں، براؤزر آسانی سے دیکھنے کے لئے آتا ہے جب تک کہ ویزپورٹ کی چوڑائی میں مواد بہاؤ کی اجازت دیتا ہے. اونچائی اصل میں نہیں کی گئی ہے.
جب آپ عناصر پر ایک لمبائی کی اونچائی کا تعین کرتے ہیں تو اس وقت ہونے والی مشکلات ہوتی ہیں جو والدین عناصر کے بغیر اونچے سیٹ کے بغیر ہیں - دوسرے الفاظ میں، والدین کے عناصر میں ایک طے شدہ اونچائی ہے: آٹو؛ . آپ اثرات میں ہیں، براؤزر سے پوچھیں کہ ایک اونچائی قدر سے اونچائی کا حساب لگانا. چونکہ اس کے نفاذ کی قیمت برابر ہوگی، نتیجہ یہ ہے کہ براؤزر کچھ نہیں کرتا.
اگر آپ اپنے ویب صفحات پر ایک فی صد اونچائی مقرر کرنا چاہتے ہیں، تو آپ کو ہر ایک کے والدین عنصر کی اونچائی مقرر کرنا ہے جو آپ چاہتے ہیں کہ اونچائی کی وضاحت کی جائے. دوسرے الفاظ میں، اگر آپ کے پاس ایسا صفحہ ہے تو:
یہاں مواد
آپ شاید اس میں ڈی پی اور پیراگراف چاہتے ہیں 100٪ اونچائی، لیکن اصل میں یہ دو ڈویلپر عناصر ہیں:
اور. ایک رشتہ دار کی اونچائی پر اونچائی کی اونچائی کی وضاحت کرنے کے لئے، آپ کو جسم اور ایچ ٹی ایم ایل کے عناصر کی اونچائی بھی لازمی طور پر مقرر کرنا ضروری ہے.
لہذا آپ کو صرف ڈی، بلکہ جسم اور ایچ ٹی ایم ایل عناصر کی اونچائی مقرر کرنے کے لئے سی ایس ایس کا استعمال کرنے کی ضرورت ہوگی. یہ ایک چیلنج ہوسکتا ہے، کیونکہ آپ کو فوری طور پر اس طرح کے مطلوبہ اثر کو حاصل کرنے کے لۓ 100٪ کی اونچائی پر ہر چیز کے ساتھ جلدی سے ہٹا دیا جا سکتا ہے.
کچھ باتیں نوٹ کریں جب 100٪ ہائٹس کے ساتھ کام کرنا
اب آپ جانتے ہیں کہ آپ کے صفحہ عناصر کی اونچائی 100٪ تک کیسے بنائی جاتی ہے، یہ آپ کے تمام صفحات پر جانے اور اس کے کرنے کے لئے دلچسپی ہوسکتی ہے، لیکن کچھ چیزیں موجود ہیں جو آپ کو اس سے آگاہ ہونا چاہئے:
- مارگیاں اور بھرتی ایک سکرال بار شامل کرسکتی ہیں جہاں آپ نہیں چاہتے ہیں. میں نے بہت زیادہ پریشان کن چیزوں میں سے ایک فی صد بلندیوں (اور چوڑائیوں) کے ساتھ کام کرنے کے ساتھ مل کر یہ ہے کہ اس عناصر پر گریڈنگ اور مارجن صفحہ پر سکرال سلاخوں کو شامل کر سکتے ہیں، اگرچہ تمام مواد سکرال سلاخوں کی ضرورت کے بغیر دکھاتا ہے. یہی وجہ ہے کہ عنصر کی اونچائی یا چوڑائی پہلی چیز ہے جو شمار کی گئی ہے. پھر مارجن اور paddings شامل ہیں. لہذا اگر آپ کے پاس ایک عنصر ہے 100٪ اونچائی اور سب سے اوپر اور سب سے نیچے 10 انچ پکسلز ہر ایک، اضافی 20 پکسلز کے لئے اسکرین بار ہو جائے گا. یاد رکھو، سی ایس ایس باکس ماڈل ایک عنصر کے سائز پر حد، سرحد، اور بھرتی کا اضافہ کرتا ہے، لہذا اس دوسرے باکس ماڈل اقدار کے ساتھ 100٪ اصل میں 100 فیصد سے زیادہ ہو جائے گا.
- اگر آپ کا مواد مقرر کردہ اونچائی سے زائد عرصہ تک لیتا ہے، تو اس کے بعد کسی بھی چیز کو مسترد کردے گا. دوسرے الفاظ میں، اگر آپ کے کالمز کے ساتھ ڈیزائن ہے تو 80٪ اونچائی میں، اور اس کے اندر اندر موجود مواد اونچائی کی 100 فی صد تک لے جائے گی، جس میں 20 فیصد اضافی کالم کے نیچے رہیں گے اور بصری ڈیزائن کو توڑ دیں گے. آپ کے صفحے کا اگر اس کالم کے نیچے مواد موجود ہے تو، متن اس کے اوپر سے اوپر لکھا جائے گا. میں اکثر یہ دیکھتا ہوں جب ویب ڈیزائنر کسی صفحہ کی اونچائی کو فروغ دینے کی کوشش کرتا ہے اور اسے مکمل طور پر شروع کرنے کیلئے کام کرتا ہے، لیکن جب اس صفحے پر مواد مستقبل میں تبدیل ہوتی ہے، تو ان کی مکمل اونچائی مکمل طور پر صفحے کے بہاؤ کو توڑتا ہے. یہ دوگنا سچ ہے جب آپ ذمہ دار ویب سائٹوں کی تعمیر کررہے ہیں جن کی چوڑائی اور اونچائی کے نقطہ نظر کے ساتھ تبدیل ہونا ضروری ہے.
اس کو درست کرنے کے لئے، آپ عنصر کے اونچائی بھی مقرر کر سکتے ہیں. اگر آپ آٹو پر سیٹ کرتے ہیں تو، سکرٹ کی سلاخیں دکھائے جائیں گی اگر انہیں ضرورت ہو تو غائب ہوجائیں. یہ بصری وقفے کو درست کرتا ہے، لیکن اس میں سکرومبار شامل ہوتی ہے جہاں آپ انہیں نہیں چاہتے ہیں.
Viewport Units کا استعمال کرتے ہوئے
اس چیلنج سے نمٹنے کا ایک اور طریقہ ہے جس میں سی ایس ایس ویزپورٹ یونٹس کے ساتھ استعمال کرنا ہے. ماپنے کے نقطہ نظر کی اونچائی یونٹ کا استعمال کرتے ہوئے، آپ کو عناصر کا سائز دیکھنے کے لۓ اونچائی کی اونچائی کا سامنا کرنا پڑتا ہے، اور یہ منظر سازی کی تبدیلی کے طور پر تبدیل ہوجائے گا. یہ ایک صفحے پر 100٪ قدیم بصریات حاصل کرنے کا ایک بڑا طریقہ ہے لیکن اب بھی ان کے مختلف آلات اور اسکرین کے سائز کے لئے لچکدار ہوسکتا ہے.