parsgreen.com
article

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

css-height-width

خاصیت هایی که تا این قسمت از آموزش مقدماتی 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;    
}
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» کار با ویژگی margin و padding در css
» مقدمه ای بر CSS، جادوگر طراحی وب!
» نحوه تنظیم لیست با تگ ul li در css
» کار با ویژگی position و float در CSS
» آشنایی با کلاس (class) و آی دی (id) در css
commentنظرات (۹ یادداشت برای این مطلب ارسال شده است)
نویسنده: علیرضا
زمان: ۱۷:۴۷:۳۶ - تاریخ: ۱۳۹۱/۰۷/۰۶
باز هم ممنون از مطلب مفیدتون.
نویسنده: sina
زمان: ۱۶:۳۵:۰۶ - تاریخ: ۱۳۹۱/۰۹/۱۷
سلام من یک سوال پیش امده برایم
برای اینکه یک سایت در تمام مانیتور یا رزولوشن ها بهم ریخته نباشد و مرتب باشد چه باید انجام داد
پاسخ: 
سلام
در هنگام طراحی قالب سایت ابتدا یک بلاک با اندازه پیکسلی ثابت (به طور مثال 960 پیکسل) تعریف و سپس بقیه عناصر صفحه را داخل آن قرار دهید، روش های دیگری نیز وجود دارد، به طور مثال روش تعریف اندازه ها به درصد (که اندازه قالب با توجه به اندازه مرورگر تغییر می کند) و...
در کل آشنایی با این گونه موارد به تسلط بر css و کمی تجربه نیاز دارد.
نویسنده: پگاه
زمان: ۰۷:۰۳:۱۳ - تاریخ: ۱۳۹۲/۰۷/۱۶
با تشکر از مطلب مفیدتون
اینطور که من امتحان کردم اگه به جای 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 در کنار هم استفاده می کنیم.
نویسنده: مصطفی
زمان: ۱۵:۲۷:۰۴ - تاریخ: ۱۳۹۳/۰۱/۱۹
سلام میشه یه نمونه کد به من بدید که یه بلاک با اندازه ی 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 است.
نویسنده: سعید
زمان: ۱۷:۳۲:۲۶ - تاریخ: ۱۳۹۳/۰۹/۰۹
سلام خسته نباشید
در زمانی که به Div اصلی (والد) خاصیت پوزیشن relative بدهیم اگر مقدار height:auto قدار بدهیم دیگر نمی توانیم به Div های زیر مجموعه (فرزند) پوزیشن absolute بدهیم برای حل این مشکل چه باید کرد؟
با تشکر از سایت خوبتون
پاسخ: 
سلام
هرچند بدون بررسی سورس کدها و تست نمی توان درک درستی از مشکل داشت، اما خاصیت absolute ذاتا طوری است که بر روی ارتفاع بلاک والد بی تاثیر است و بلاک والد از آن پیروی نمی کند، راه حل مشکل بسته به شرایط می تواند متفاوت باشد، اما مطمئن ترین راه این است که رابط کاربری شما طوری طراحی شود که کمتر نیاز به مقدار auto برای اینچنین مواردی باشد (بهتر است ارتفاع مقداری ثابت باشد)، مقدار auto معمولا برای بلاک فرزند که دارای محتوا است در نظر گرفته می شود!
نویسنده: داوود
زمان: ۱۱:۰۲:۴۴ - تاریخ: ۱۳۹۴/۰۵/۱۵
سلام آقای مهندس، وقتتون بخیر و خوشی انشاالله
آقای مهندس تو یه مقاله ای چند روز قبل خوندم که نوشته بود سعی کنید از خاصیت line-height فقط در تگ body استفاده کنید چون این خاصیت، اندازه خودش رو از فونت والد به ارث میبره، کوچکترین تغییری در اندازه فونت ممکنه آرایش صفحه رو بهم بریزه، خوب حالا یه سوال؟؟ من دیدم که باز هم برخی از افراد حرفه ای برای اینکه منو رو از نظر ارتفاع در وسط box قرار بدن میان و اگه height رو بالفرض 50 گرفتن line-height رو هم 50 میدن. خوب اگه اینجوری باشه و مقاله دوستمون درست باشه، در واقع اینکار خیلی استاندارد نیست؟؟ یا اینکه اگه از اندازه فونتهامون مطمئن شده باشیم، این کار دیگه اشکالی نداره و میشه به کار برد؟؟
پاسخ: 
سلام
هیچ الزامی به استفاده از line-height در تگ خاصی وجود ندارد، این خاصیت معمولا نباید نقشی در فرمت بندی و آرایش صفحه داشته باشد (اگر هم داشته باشد، برای مواردی استفاده می شود که اندازه فونت مقدار ثابت و از پیش تعریف شده ای است)، همان طور که از نام آن مشخص است، تنها فاصله بین خطوط را (منطبق با اندازه فونت) مشخص می کند و لذا به طور مثال نقشی در اندازه بلاک ها یا نحوه چینش آنها در صفحه ندارد و یک عنصر داخلی (مربوط به محتوا) است، نتیجه اینکه اگر با تعریف یک line-height ثابت در body نیاز طراحی رفع می شود، این کار را انجام دهید، در غیر این صورت (به طور مثال گاهی چند نوع ارتفاع متفاوت بین خطوط مورد نیاز است) استفاده از مقادیر متفاوت در جاهای متفاوت محدودیت خاصی ندارد (قاعدتا اگر قرار بر متغیر بودن اندازه فونت است، باید صفحه خود را با اندازه های مختلف فونت که احتمالا استفاده خواهد شد، تست کنید).
نویسنده: حسام
زمان: ۱۴:۱۱:۱۵ - تاریخ: ۱۳۹۵/۰۳/۲۲
سلام
چگونه میشه یک تگ iframe رو به صورت fullscreen نمایش داد؟
من height و width برابر 100 درصد قرار دادم ولی فقط width این مقدار رو گرفت و درست کار کرد .
پاسخ: 
مقدار margin را برای body برابر 0 قرار دهید.
body {
margin: 0;
}
نویسنده: حسام
زمان: ۱۶:۴۱:۲۸ - تاریخ: ۱۳۹۵/۰۳/۲۷
همون طور که گفتین دادم ولی باز نشد
پاسخ: 
لطفا فایل خود را به آدرس ایمیل ما (موجود در بخش تماس) ارسال کنید تا بررسی گردد.
نویسنده: حسام
زمان: ۱۶:۴۷:۴۰ - تاریخ: ۱۳۹۵/۰۳/۲۷
من یک صفحه میخوام که یک سایت رو در خودش نمایش بده و فول اسکرین باشه .
تگ iframe با دادن آدرس سایت به خاصیت src سایت رو در خودش نمایش میده.
اگه تگ iframe رو نمیشه فول اسکرین کرد تگ canvas رو میشه اما چه کدی لازم داره تا سایتی رو در خودش نمایش بده ؟
پاسخ: 
تا آنجا که اطلاع داریم کاربرد canvas متفاوت است و نمی توانید محتوای یک صفحه وب را در آن داشته باشید!




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

8 × 8
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...