زبان XHTML و مشخصه Height=100% برای تگ Table - بخش دوم
در بخش اول این مقاله به عدم پشتیبانی 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 دیگر استفاده نمی شود و این روش به نوعی منسوخ باشد!
نمونه صفحه که هم در IE , هم در FF کار می کند را می توانید از زیر دانلود کنید:
موفق باشید.