عنصری که در زیر آورده شده است داری طولی برابر با 100 درصد فضایی است که در اختیار آن قرار داده شده است :
طول این عنصر برابر با %100 است.
مقداردهی صفات height و width
از صفات height و width برای تنظیم طول و عرض یک عنصر استفاده میشود.
صفات height و width میتوانند با مقدار auto (که این مقدار پیشفرض برای این دو صفت است و به این معناست که مرورگر طول و عرض را محاسبه میکند) ، یا تعیین یک مقدار که میتواند در واحد های پیکسل، سانتی متر و ... باشد ، یا تعیین یک مقدار به صورت درصدی (%)، مقدار دهی شوند.
عنصری که در زیر نشان داده شده است دارای مقدار 200 پیکسل برای عرض و 50% برای طول است :
این عنصر دارای طول %50 و عرض 200 پیکسل است.
} div
;height : 200px
;width : 50%
;background-color : powderblue
{
عنصری که در زیر نشان داده شده است دارای مقدار 100 پیکسل برای عرض و 500 پیکسل برای طول است :
این عنصر دارای طول 500 پیکسل و عرض 100 پیکسل است.
} div
;height : 100px
;width : 500px
;background-color : powderblue
{
مقدار دهی صفت max-width
از صفت max-width برای تنظیم حداکثر طول یک عنصر استفاده میشود.
صفت max-width میتواند به وسیله ی مقادیری که در واحد های پیکسل ، سانتیمتر و ... مشخص میشوند، و یا درصدی (%) از فضایی که د ر آن قرار گرفته است و یا با مقدار none (که این مقدار پیشفرض برای این صفت است و به این معناست مقداری برای این صفت تعیین نشده است) مقدار دهی شود.
مشکلی که مقدار دهی ثابت برای طول عناصر وجود دارد این است که برای مثال اگر عنصری با طول 500 پیکسل مقدار دهی شود، زمانی که پنجره مرورگر از این مقدار کوچکتر شود مرورگر برای اینکه بتواند این عنصر را به طور کامل نشان دهد باید به صورت افقی اسکرول بخورد.
در این مواقع با استفاده از صفت max-width میتوان این مشکل را مدیریت کرد.
این عنصر دارای حداکثر طول 500 پیکسل و عرض 100 پیکسل است.
نکته: با مقدار دهی صفت max-width ، صفت width بی اثر خواهد شد.
در نمونه مثال زیر یک عنصر div نشان داده شده است که دارای عرض 100 پیکسل و حداکثر طول 500 پیکسل است.
} div
;max-width : 500px
;height : 100px
;background-color : powderblue
{
تمام صفات ابعاد در CSS
| صفت |
توضیح |
| height |
تنظیم عرض یک عنصر |
| max-height |
تنظیم حداکثر عرض برای یک عنصر |
| max-width |
تنظیم حداکثر طول برای یک عنصر |
| min-height |
تنظیم حداقل عرض برای یک عنصر |
| min-width |
تنظیم حداقل طول برای یک عنصر |
| width |
تنظیم طول برای یک عنصر |