زبان XHTML و مشخصه Height=100% برای تگ Table - بخش اول
مجموعه کنترل های 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 بود.).
