[h=2]زبان XHTML و مشخصه Height=100% برای تگ Table - بخش اول[/h] مجموعه کنترل های ASP.net Ajax Control Toolkit بر اساس زبان XHTML نوشته شده اند و در صورتیکه زبان صفحه شما XHTML نباشد با مشکلات زیادی در بخش نمایش این کنترل ها مواجه خواهید شد ، استفاده از زبان XHTML هم برای کسانیکه که سالیان سال هست که از زبان HTML استفاده می کنند خیلی راحت نیست ، یکی از مواردی که در اولین دقایق استفاده از این زبان XHTML برای من پیش آمد مشخصه Height=100% برای تگ Table است .این مشخصه دیگر در زبان XHTML برای تگ Table قابل نسبت دادن نیست و در صورتیکه این مشخصه را در تگ خود قرار بدهید ویرایشگر مربوطه خطاهائی را به شما در این رابطه نمایش می دهد . اما راه حل چیست ؟ برای حل این مشکل دو راه حل وجود دارد ،البته هیچ کدام از این دو راه حل ، به صورت کامل مشکل را حل نمی کنند. اولین راه حل استفاده از تگ های Div به جای Table است و دیگری استفاده از همین تگ Table است بهمراه css . در این پست قصد دارم روش دوم را به شما توضیح بدهم ، چرا که دست یافتن به آن آسان تر و همچنین کارآمد تر از روش اول است ! کد: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> body , html { height:100%; margin:0px; } #MainTable { height:100%; width:100%; } #MainCell { background-color:red; } </style> </head> <body> <table id="MainTable"> <tr> <td id="MainCell"></td> </tr> </table> </body> </html> همون طور که در کد فوق مشاهده می کنید ، با نسبت دادن مقدار height=100% برای body , html مشکل حل می شود ، و با نسبت دادن Height=100% برای MainTable می توانیم یک جدول که طبق زبان XHTML تعریف شده و ارتفاعش 100% است داشته باشیم ، اما توجه شما را به این بخش جلب می کنم : کد: body , html { height:100%; margin:0px; } margin:0px را در صورتیکه از این بخش از css حذف نمائید ، صفحه شما Scroll می خورد ، مشکل استفاده از این روش در همین بخش است ، وقتی در زبان XHTML به یک تگ Table مقدار Height=100% نسبت داده می شود ، 100% صفحه تخصیص داده می شود نه 100% از آن فضائی که استفاده نشده است ، این مشکل را با طرح یک مثال دیگر بیان می کنم ، فرض کنید قرار است جدولی داشته باشید با سه سطر ، سطر اول و سطر سوم که به ترتیب مربوط به Header و Footer صفحه شما می باشند باید دارای ارتفاع ثابت 150 و 75 پیکسل باشند و سطر دوم که مربوط به قرار گرفتن محتویات صفحه است باید باقی مانده صفحه را پر کند به شکلی که Header در بالا و Footer در پائین قرار گیرد ، کد زیر با توجه به توضیح فوق که Height=100% برای جدول و ستون هایش به این معناست که کل صفحه را اختصاص بدهد باز هم اسکرول در صفحه ظاهر می شود ،البته در حالتی که شما به یک Cell از جدول مقدار Height=100% را نسبت می دهید این IE است که تمامی 100% صفحه را اختصاص می دهد و در فایرفاکس تمامی فضای باقی مانده به آن cell اختصاص داده می شود . کد: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> body , html { height:100%; margin:0px; } #MainTable { height:100%; width:100%; } #MainCell { background-color:gray; height:100%; } #HeaderCell { height:150px; background-color:blue; } #FooterCell { height:75px; background-color:red; } </style> </head> <body> <table id="MainTable"> <tr><td id="HeaderCell"></td></tr> <tr><td id="MainCell"></td></tr> <tr><td id="FooterCell"></td></tr> </table> </body> </html> تا به اینجای کار مشکل در فایرفاکس بصورت کامل حل شده است و تنها این IE است که دارای مشکل است (نسخه IE که من صفحه را با آن تست کرده 7 بود.).
پاسخ : Xslt چیست و چگونه کار می کند؟ [h=2]زبان XHTML و مشخصه Height=100% برای تگ Table - بخش دوم[/h] در بخش اول این مقاله به عدم پشتیبانی XHTML از Height=100% اشاره کردیم ، به بیان یک راه حل برای حل این مشکل پرداختیم ، راه حل ارائه شده مشکل را بصورت کامل در مرورگر FireFox حل می کرد اما همچنان در IE با مشکل Scroll داشتن صفحه روبرو بودیم ، در این پست تمام تلاش خود را برای ارائه یک راه حل (شاید هم تنها راه حل) برای از بین بردن این Scroll آزاردهنده خواهیم کرد . در این بخش علاوه بر استفاده از css مقداری هم کد جاوا اسکریپت به صفحه خود اضافه خواهیم کرد تا مشکل بصورت کامل حل شود. بخش 1 - اضافه کردن css در صورتیکه بخش css مطلب قبلی را به یاد داشته باشید بخشی که باعث میشد که Scroll در مرورگر IE ایجاد شود بخش زیر بود : کد: #MainCell { background-color:gray; height:100%; } در صورتیکه بتوانیم از دستورات شرطی css استفاده کنیم و بخش height=100% را به شکلی تنظیم کنیم که تنها وقتی مرورگری به غیر از IE بود در صفحه استفاده شود مشکل تا حدودی حل می شود ، اشتباه نکنید قرار نیست ما این بخش را با استفاده از جاوا اسکریپت پیاده سازی کنیم ، این بخش را بوسیله قدرت css پیاده سازی خواهیم کرد. مرورگر IE تا نسخه 6 از این نوع css پشتیبانی نمی کرد: کد: html>body #MainCell { height:100%; } پس اگر قرار باشد بخشی را در فایل css داشته باشیم که بخواهیم در مرورگری به غیر از IE استفاده شود از همین بخش استفاده می کردیم ، کافی بود آن بخش اختصاصی را به شیوه فوق در فایل css تعریف کنیم ، اما مشکل اینجاست که IE 7.0 از این نوع css هم پشتیبانی می کند ، اما خوب باز هم یک ترفند دیگری وجود دارد ، آن هم استفاده از css زیر است که IE 7.0 هم آن را پشتیبانی نمی کند: کد: html>/**/body #MainCell { height:100%; } با این کار تونستیم بخشی که مشکل ساز هست را در IE استفاده نکنیم ، اما با حذف این بخش دیگر Footer به انتهای صفحه منتقل نمی شود ، اینجاست که جاوا اسکریپت این مشکل را حل خواهد کرد: بخش 2 - اضافه کردن Javascript ی که تنها در IE اجرا شود سناریوی این بخش هم به این صورت است که یک متد را در دو رویداد PageLoad , PageResize صفحه صدا میزنیم ، در متد فراخوانده شده کاری که می کنیم این است که ارتفاع صفحه را در یک متغیر ذخیره کرده ، دو مقدار ثابت 150 , 75 پیکسل که مربوط به Header , Footer هستند را از آن کم کرده مقدار باقی مانده که همانا! مقدار فضای باقی مانده از صفحه است را به سلولی که قرا است محتویات صفحه در آن قرار بگیرد نسبت می دهیم ، به این شکل: کد: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> body , html { height:100%; margin:0px; } #MainTable { height:100%; width:100%; } #MainCell { background-color:gray; height:100%; } #HeaderCell { height:150px; background-color:blue; } #FooterCell { height:75px; background-color:red; } </style> </head> <body onload="Page_OnLoad();" onResize="Page_OnLoad();"> <table id="MainTable"> <tr><td id="HeaderCell"></td></tr> <tr><td id="MainCell"></td></tr> <tr><td id="FooterCell"></td></tr> </table> <script type="text/javascript" language="javascript"> function Page_OnLoad() { document.getElementById("MainCell").style.height = document.body.clientHeight - 250; } </script> </body> </html> با این دو بخش مشکل به صورت کامل حل شد ، اما شاید این سوال برای شما پیش بیاید که چرا استفاده از تگ های Div نسبت به این روش سخت تر هست ، برای اینکه که سادگی و سختی و مشکلاتی که در هر روش وجود دارد را شما خودتان ببینید و خودتان تصمیم بگیرید که در صورت نیاز از کدام روش استفاده نمائید آن روش را هم در یک پست جداگانه ارائه خواهم داد ، اما در طراحی روز دنیا از Table دیگر استفاده نمی شود و این روش به نوعی منسوخ باشد!
