آموزش برنامه نویسی وب و مهارتهای مرتبط

پنجشنبه ۰۴ اردیبهشت ۱۴۰۴

Thursday, April 24, 2025 GMT +3:30

کاربرد خاصیت height و width در CSS

خاصیت هایی که تا این قسمت از آموزش مقدماتی css به آنها پرداختیم با دو ویژگی دیگر تکمیل می شوند که height و width نام دارند، همان طور که از عناوین آنها پیدا است، از این خاصیت ها برای تعیین میزان عرض و ارتفاع عناصر در صفحات وب استفاده می شود که می توانند بسته به هدف شما مقادیری اعم از پیکسل، درصد و... داشته باشند، در کنار این دو ویژگی اصلی، ویژگی های فرعی max-height ،max-width ،min-width و min-height نیز وجود دارند که ممکن است در استایل نویسی css و در برخی مواقع کاربردهایی داشته باشند، به هر صورت در ادامه آموزش در حد امکان به بررسی تفصیلی آنها خواهیم پرداخت.

خاصیت height در css

همان طور که پیش تر گفته ایم، قابلیت های ظاهری تگ های html در صفحات وب با استفاده از ویژگی های css قابل کنترل هستند، به طور مثال بلاک های div، پاراگراف ها یا تگ p، تگ span، تگ body و امثال آن می توانند بنا به نیاز شما ویژگی هایی مانند رنگ پس زمینه، رنگ متن، نوع متن، میزان حاشیه، خطوط و... را داشته باشند که تمام آنها با css قابل تنظیم است و پیش از این تا حدود زیادی به آنها اشاره کرده ایم، قابلیت کنترل ارتفاع یکی دیگر از مواردی است که می توان با css به آن دست یافت، خاصیتی که css برای این منظور در نظر گرفته است، ویژگی height است که با مقادیر پیکسلی، درصدی و... مقدار دهی می شود، در مثال زیر به صورت کاربردی با این عنصر آشنا می شویم.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | خاصیت height در css</title>
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block{
    height:100px;
    border:1px solid #999;
    background-color:#FC0;
    margin:4px;
}
.main{
    height:200px;
    border:1px solid #999;
    background-color:#CCC;
    margin:4px;
    padding:4px;
}
.layer{
    height:50%;
    border:1px solid #999;
    background-color:#6CF;
}
#my-css{
    height:20em;
    border:1px solid #999;
    background-color:#6C6;
    margin:4px;    
}
</style>
</head>
<body>
<div class="block">
متن در کلاس block - مقدار دهی پیکسلی
</div>
<div class="main">
<div class="layer">
متن در کلاس layer - مقدار دهی درصدی
</div>
بلاک والد در کلاس main - مقدار دهی پیکسلی
</div>
<div id="my-css">
متن در آی دی my-css - مقداردهی با em
</div>
<hr />
در استایل نویسی کاربردی معمولا از مقدار دهی پیکسلی و برخی مواقع از مقدار دهی درصدی یا em استفاده می شود (به طور مثال برای طراحی قالب های سازگار با گوشی های تلفن همراه)؛ سایر موارد در امورات عادی کاربرد زیادی ندارند.
</body>
</html>

پیش نمایش
توضیح:
- کلاس ها و آی دی تعریف شده در کد بالا، فرضی و با عناوین انتخابی است.
- در استفاده از مقداردهی درصدی نیاز به وجود یک بلاک والد یا دربرگیرنده داریم، به این معنی که تنها عناصر زیر مجموعه (بلاک درونی) می توانند مقادیر درصدی داشته باشد که در واقع درصد از میزان ارتفاع بلاک اصلی حساب می شود، به طور مثال اگر بلاک اصلی 200 پیکسل ارتفاع داشته باشد، بلاکی که درون آن قرار گرفته با ارتفاع 25 درصد، معادل 50 پیکسل (25 درصد از 200 پیکسل) در حالت معمولی ارتفاع خواهد داشت.
در css برای مقدار دهی چند شیوه وجود دارد:
- تعیین مقادیر به پیکسل (picture element)، به فرض 6px، 2px و... (پیکسل ها مقادیری ثابت هستند)، از واحد px بیشتر برای نمایش محتوا در صفحه نمایش (مانیتور) استفاده می شود.
- تعیین مقادیر به Points، به فرض 1pt، 3pt و... (هر pt برابر 1/72 اینچ است)، از واحد pt بیشتر برای کارهای چاپی استفاده می شود.
- تعیین مقادیر به Ems، به فرض 1em، 0.5em و... (هر em برابر با 16 پیکسل و 12 pt است)، به دلیل قابلیت غیر ثابت و مقیاس پذیر (scalable)، این واحد در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به سانتی متر (CentiMeter)، به فرض 5cm ، 10cm و...، استفاده از این شیوه در وب، چندان مرسوم نیست.
- تعیین مقادیر به درصد (Percent)، به فرض %10 ، %50 و...، در این حالت اندازه بلاک با توجه به اندازه صفحه نمایش، مقادیری متغیر خواهد بود؛ این واحد نیز در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به صورت خودکار (auto) و حالت وراثتی (inherit) از بلاک والد.

خاصیت width در css

در کنار خاصیت height که ارتفاع عناصر را مشخص می کند، خاصیت width برای تنظیم عرض عناصر در صفحات وب تعریف شده است، بدین ترتیب با کمک css قابلیت تعیین ارتفاع و عرض برای تگ های html به راحتی فراهم می شود، این خاصیت نیز مانند height از مقادیر پیکسلی، درصدی و... تبعیت می کند که در مثال زیر با چند نمونه از آن آشنا می شویم.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | خاصیت width در css</title>
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block{
    width:500px;
    height:100px;
    border:1px solid #999;
    background-color:#FC0;
    margin:4px;
}
.main{
    width:800px;
    height:200px;
    border:1px solid #999;
    background-color:#CCC;
    margin:4px;
    padding:4px;
}
.layer{
    width:50%;
    height:50%;
    border:1px solid #999;
    background-color:#6CF;
}
#my-css{
    width:50em;
    height:20em;
    border:1px solid #999;
    background-color:#6C6;
    margin:4px;    
}
</style>
</head>
<body>
<div class="block">
متن در کلاس block - مقدار دهی پیکسلی
</div>
<div class="main">
<div class="layer">
متن در کلاس layer - مقدار دهی درصدی
</div>
بلاک والد در کلاس main - مقدار دهی پیکسلی
</div>
<div id="my-css">
متن در آی دی my-css - مقداردهی با em
</div>
<hr />
علاوه بر بلاک های div، خاصیت های عرض و ارتفاع در css بر روی سایر تگ ها مانند جداول، پاراگراف ها، تصاویر و... نیز می توانند تاثیر گذار باشند.
</body>
</html>

پیش نمایش
توضیح:
- قواعد تعریف خاصیت width دقیقا مشابه با خاصیت height است.
- دقت کنید که در یک کلاس یا آی دی، می توان به فرض برای width آن از یک نوع مقدار دهی و برای height از نوعی دیگر استفاده کرد، به فرض برای عرض از مقدار دهی پیکسلی و برای ارتفاع از مقدار دهی درصدی استفاده کرد و از این لحاظ محدودیتی وجود ندارد.

خاصیت min-height و max-height

در کنار دو خاصیت اصلی height و width، از چند خاصیت زیر مجموعه نیز در این رابطه می توانیم استفاده کنیم، از جمله min-height و max-height، اما اول باید بدانیم که این دو ویژگی چه کاربردی دارند؟
به طور خلاصه min-height حداقل ارتفاع یک عنصر را مشخص می کند، به فرض در حالت پیش فرض مرورگرها هر بلاک را به اندازه محتوایی که در آن وجود دارد، ارتفاع می دهند، اما با تنظیم مقادیر min-height مرورگر حداقل مقادیر ارتفاع را (چه محتوا به اندازه کافی باشد و چه نباشد) برای آن بلاک در نظر می گیرد، اما max-height حداکثر ارتفاع یک عنصر را مشخص می کند، یعنی به فرض اگر میزان محتوا از ارتفاع یک بلاک بیشتر باشد، مرورگر ارتفاع را همچنان ثابت نگه می دارد و ممکن است محتوا در خارج از بلاک نشان داده شود یا اینکه آن بلاک اسکرول گردد، البته این ویژگی معمولا در کنار خاصیت overflow استفاده می شود، overflow رفتار مرورگر در حالتی که محتوا از میزان ارتفاع یک بلاک بیشتر است را تعیین می کند که خود چند مقدار می پذیرد:
- auto، اگر محتوا بیشتر باشد، بلاک اسکرول می شود.
- hidden، محتوای اضافه مخفی می شود.
- scroll، نوار اسکرول ظاهر می شود.
- visible، بدون اینکه بلاک اسکرول شود، محتوا در بیرون از آن نشان داده می شود.
مثال:

#my-id{
    max-height:50px;
    overflow:scroll;    
}

یا

#my-id{
    min-height:200px;
    height:auto;    
}

خاصیت max-width و min-width

کارکرد خاصیت max-width و min-width در قریب به اتفاق موارد مشابه min-height و max-height است که در بالا اشاره شد، با این تفاوت که در اینجا خاصیت بر روی عرض عناصر html تاثیر می گذارد و از این گذشته مقادیر overflow برای width کاربردی ندارد.
مثال:

#my-id{
    max-width:50px;
    max-height:50px;
    overflow:scroll;    
}

یا

#my-id{
    min-width:300px;
    width:auto;    
}

دسته بندی: آموزش مقدماتی » CSS

برچسب ها: CSS

قبلی »

« بعدی

مطالب بیشتر:
کاربرد ویژگی position و float در CSS
خاصیت Background و ویژگی های آن در CSS
نحوه تنظیم استایل لینک (Link) در CSS
نحوه تنظیم لیست با تگ ul li در CSS
ویژگی های Font و Text در CSS

دیدگاه

۱۳ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

neda

۱۷:۰۸ ۱۳۹۹/۰۵/۰۷

با سلام
من سایتی زدم از نظر ریسپانسیو هم اکی هست. فقط ارتفاعش از مانیتورهای مختلف به یک اندازه نیست. برای div اول ارتفاع ثابتی در نظر گرفتم که بدون اسکرل خوردن اطلاعاتی در آن نمایش داده شود ولی در هر مانیتور اندازه متفاوتی نشان میدهد. کاری هست بتوانم انجام دهم تا در همه دستگاهها ارتفاع یکسان شود؟

منظورتان از ارتفاع ثابت هماهنگی با ارتفاع صفحه نمایش دستگاه های مختلف است؟ چون با مقداردهی پیکسلی می توانید در حالت عادی ارتفاع ثابتی داشته باشید! اما اگر منظور ارتفاع هماهنگ با ارتفاع مانیتور است باید از مقداردهی درصدی و خاصیت هایی مانند height به شکل نمونه زیر استفاده کنید:

html, body {
    height: 100%;
}
#content {
    overflow: auto;
    height: 100%;
}

یا

html, body {
    height: 100%;
}
#content {
    overflow: auto;
    height: 100vh;
}

با توجه به اینکه ارتفاع صفحه نمایش دستگاه های مختلف یکسان نیست، وجود اختلاف در نحوه نمایش محتوا و تغییر ارتفاع در وب امری طبیعی و اجتناب ناپذیر است.
برای راهنمایی دقیقتر درج آدرس نمونه صفحه مد نظر و دسترسی به سورس کدها ضروری است.

مجتبی

۰۹:۵۳ ۱۳۹۸/۰۵/۱۴

هر وقت این سایت رو می بینم سریع ازش رد میشم حالم از این سایت بهم میخوره هیچ طراحی جذابی نداره مطالبش هم بدرد نخوره

Kimia

۲۳:۰۶ ۱۳۹۶/۰۵/۲۲

من سایت با اندازه های پیکسی ساختم حالا میخوام به درصد بنویسم باید چکار کنم

قاعدتا باید سورس CSS سایت به طور کلی ویرایش و ساختار قالب با حالت درصدی مجددا تنظیم شود.

آرش

۱۴:۳۱ ۱۳۹۵/۱۰/۱۸

با سلام
من میخوام به این خط قابلیت تغییر اندازه با توجه به صفحه نمایش رو بدم:

<div style="width:220px; height:180px; border-style:groove; border-width:thin">

یعنی کادر به صورت خودکار تغییر اندازه بده متناسب با صفحه
از بالا چیزی متوجه نشدم.
با تشکر

این موضوع به کلیت طراحی و کدنویسی HTML و CSS کار برمی گردد و صرفا با این خط کد نمی توانید چنین قابلتی ایجاد کنید، در واقع باید از تکنیک مقدار دهی درصدی یا روش هایی مانند طراحی واکنش گرا (Responsive) استفاده شود.

حسام

۱۶:۴۷ ۱۳۹۵/۰۳/۲۷

من یک صفحه میخوام که یک سایت رو در خودش نمایش بده و فول اسکرین باشه .
تگ iframe با دادن آدرس سایت به خاصیت src سایت رو در خودش نمایش میده.
اگه تگ iframe رو نمیشه فول اسکرین کرد تگ canvas رو میشه اما چه کدی لازم داره تا سایتی رو در خودش نمایش بده ؟

تا آنجا که اطلاع داریم کاربرد canvas متفاوت است و نمی توانید محتوای یک صفحه وب را در آن داشته باشید!

حسام

۱۶:۴۱ ۱۳۹۵/۰۳/۲۷

همون طور که گفتین دادم ولی باز نشد

لطفا فایل خود را به آدرس ایمیل ما (موجود در بخش تماس) ارسال کنید تا بررسی گردد.

حسام

۱۴:۱۱ ۱۳۹۵/۰۳/۲۲

سلام
چگونه میشه یک تگ iframe رو به صورت fullscreen نمایش داد؟
من height و width برابر 100 درصد قرار دادم ولی فقط width این مقدار رو گرفت و درست کار کرد .

مقدار margin را برای body برابر 0 قرار دهید.

body {
    margin: 0;
}

داوود

۱۱:۰۲ ۱۳۹۴/۰۵/۱۵

سلام آقای مهندس، وقتتون بخیر و خوشی انشاالله
آقای مهندس تو یه مقاله ای چند روز قبل خوندم که نوشته بود سعی کنید از خاصیت line-height فقط در تگ body استفاده کنید چون این خاصیت، اندازه خودش رو از فونت والد به ارث میبره، کوچکترین تغییری در اندازه فونت ممکنه آرایش صفحه رو بهم بریزه، خوب حالا یه سوال؟؟ من دیدم که باز هم برخی از افراد حرفه ای برای اینکه منو رو از نظر ارتفاع در وسط box قرار بدن میان و اگه height رو بالفرض 50 گرفتن line-height رو هم 50 میدن. خوب اگه اینجوری باشه و مقاله دوستمون درست باشه، در واقع اینکار خیلی استاندارد نیست؟؟ یا اینکه اگه از اندازه فونتهامون مطمئن شده باشیم، این کار دیگه اشکالی نداره و میشه به کار برد؟؟

سلام
هیچ الزامی به استفاده از line-height در تگ خاصی وجود ندارد، این خاصیت معمولا نباید نقشی در فرمت بندی و آرایش صفحه داشته باشد (اگر هم داشته باشد، برای مواردی استفاده می شود که اندازه فونت مقدار ثابت و از پیش تعریف شده ای است)، همان طور که از نام آن مشخص است، تنها فاصله بین خطوط را (منطبق با اندازه فونت) مشخص می کند و لذا به طور مثال نقشی در اندازه بلاک ها یا نحوه چینش آنها در صفحه ندارد و یک عنصر داخلی (مربوط به محتوا) است، نتیجه اینکه اگر با تعریف یک line-height ثابت در body نیاز طراحی رفع می شود، این کار را انجام دهید، در غیر این صورت (به طور مثال گاهی چند نوع ارتفاع متفاوت بین خطوط مورد نیاز است) استفاده از مقادیر متفاوت در جاهای متفاوت محدودیت خاصی ندارد (قاعدتا اگر قرار بر متغیر بودن اندازه فونت است، باید صفحه خود را با اندازه های مختلف فونت که احتمالا استفاده خواهد شد، تست کنید).

سعید

۱۷:۳۲ ۱۳۹۳/۰۹/۰۹

سلام خسته نباشید
در زمانی که به Div اصلی (والد) خاصیت پوزیشن relative بدهیم اگر مقدار height:auto قدار بدهیم دیگر نمی توانیم به Div های زیر مجموعه (فرزند) پوزیشن absolute بدهیم برای حل این مشکل چه باید کرد؟
با تشکر از سایت خوبتون

سلام
هرچند بدون بررسی سورس کدها و تست نمی توان درک درستی از مشکل داشت، اما خاصیت absolute ذاتا طوری است که بر روی ارتفاع بلاک والد بی تاثیر است و بلاک والد از آن پیروی نمی کند، راه حل مشکل بسته به شرایط می تواند متفاوت باشد، اما مطمئن ترین راه این است که رابط کاربری شما طوری طراحی شود که کمتر نیاز به مقدار auto برای اینچنین مواردی باشد (بهتر است ارتفاع مقداری ثابت باشد)، مقدار auto معمولا برای بلاک فرزند که دارای محتوا است در نظر گرفته می شود!

مصطفی

۱۵:۲۷ ۱۳۹۳/۰۱/۱۹

سلام میشه یه نمونه کد به من بدید که یه بلاک با اندازه ی 200 در 200 هست که درونش متنی می نویسیم ولی اگه متن از ارتفاع بلاک بیشتر شد اسکرول افقی (پایین و بالا) بوجود بیاد دقیقا مثل بلاک های کد درون سایت شما

سلام
نمونه استایل کد:

<style type="text/css">
.scroll-container{
	width:200px;
	height:auto;
	padding:0px;
}
.scroll-block{
	display:block; 
	padding:4px;
	margin:0px;
	direction:rtl;
	width:auto;
	border:#69C 1px solid;
	word-wrap:break-word;
	white-space:pre-line;
	max-height:200px;
	overflow-y:scroll; 
	overflow-x:hidden;
	color:#333;
	background-color:#FBFBFB;
	text-align:right;	
}
</style>
<div class="scroll-container">
<div class="scroll-block">بلاک اسکرول متن</div>
</div>

نکته: در سایت از تگ pre استفاده شده، اما استایل بالا با تگ div است.

پگاه

۰۷:۰۳ ۱۳۹۲/۰۷/۱۶

با تشکر از مطلب مفیدتون
اینطور که من امتحان کردم اگه به جای min-height بگذاریم height هم موقعی که المان محتوا نداره به اندازه عددی که به height دادیم ارتفاع می گیره یعنی همون کاری که min-height باید انجام بده
و اگه به جای max-hieght هم height بذاریم اگر میزان محتوا از ارتفاع یک المان بیشتر باشد، مرورگر ارتفاع را ثابت نگه می دارد یعنی همون کاری که max-height باید انجام بده
پس چه لزومی به استفاده از max-height و min-height هست؟

کاربرد های min-height و ... در موارد خاصی است، به طور مثال فرض کنید بلاکی نیاز به داشتن ارتفاعی با مقدار ثابت 200 پیکسل در حالت استاندارد دارد، اما اگر بخواهیم این بلاک در صورتی که محتوایی بیش از 200 پیکسل داشت، به همان نسبت تغییر ارتفاع دهد (auto)، باید از max-height نیز در کنار height استفاده کنیم، یا به فرض اگر بخواهیم حداقل و حداکثر ارتفاع یک بلاک را مشخص کنیم، از min-height و max-hieght در کنار هم استفاده می کنیم.

sina

۱۶:۳۵ ۱۳۹۱/۰۹/۱۷

سلام من یک سوال پیش امده برایم
برای اینکه یک سایت در تمام مانیتور یا رزولوشن ها بهم ریخته نباشد و مرتب باشد چه باید انجام داد

سلام
در هنگام طراحی قالب سایت ابتدا یک بلاک با اندازه پیکسلی ثابت (به طور مثال 960 پیکسل) تعریف و سپس بقیه عناصر صفحه را داخل آن قرار دهید، روش های دیگری نیز وجود دارد، به طور مثال روش تعریف اندازه ها به درصد (که اندازه قالب با توجه به اندازه مرورگر تغییر می کند) و...
در کل آشنایی با این گونه موارد به تسلط بر css و کمی تجربه نیاز دارد.

علیرضا

۱۷:۴۷ ۱۳۹۱/۰۷/۰۶

باز هم ممنون از مطلب مفیدتون.

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.