cssblog.ir logo
P

height

نحوه تعیین ارتفاع عناصر

همانطور که از نام مشخصه height پیداست بوسیله این مشخصه می توان ارتفاع عناصر را با روش های مختلف مقداردهی، تعیین نمود

با استفاده از مشخصه height می توان ارتفاع عناصر را با دادن هریک از مقادیر مجاز تعیین نمود.

مثال 1: تعیین ارتفاع ۲۰۰ پیکسل 

مثال۲: ارتفاع درصدی

مثال ۳: ارتفاع به نسبت سایز فونت (em)

مثال ۴: ارتفاع به ارث برده شده

ارتفاع پیشفرض عناصر در حالت عادی و بدون هیچگونهposition برابر باauto خواهد بود و اگر عنصر محتوایی داشت، به اندازه ای که آن محتوا دیده شود بلند خواهد بود و اگر هیچ محتوایی نداشت ارتفاع آن صفر خواهد بود.

اسکرول عمودی

برای اینکه محتوا اسکرول عمودی داشته باشد باید برای آن ارتفاع مشخص تعیین شده باشد تا مرورگر بتواند تشخیص دهد که چه میزان از محتوا را نمایش داده و چه میزان باید مخفی بوده و با اسکرول نمایش داده شود. مثال زیر این موضوع را نمایش می‌دهد: 

 در مثال فوق دو عنصر دارای متن یکسان در صفحه قرار گرفته‌اند. همانطور که مشاهده می‌کنید عنصر اول بدلیل نداشتن ارتفاع مشخص (با استفاده از مشخصه height) بدون اسکرول نمایش داده می‌شود. 

مقادیر درصدی

درباره مقادر درصدی که به ارتفاع داده می شود نکاتی وجود دارد و ممکن است در ابتدا نتیجه آن چیزی نباشد که ما انتظار داریم. برای شفاف تر شدن موضوع نکات زیر را درنظر بگیرید:

۱- وقتی مقدار بصورت درصدی باشد ارتفاع به نسبت ارتفاع والد محاسبه خواهد شد.

۲- در حالتی که عنصرposition عادی داشته باشد حتما باید والد مقدار مشخصی برای ارتفاع داشته باشد در غیر اینصورت مقداری درصدی عمل نخواهد کرد. (چون همان بحث معروف “چند درصد از چقدر؟” پیش می‌آید)

ارتباط ارتفاع با display

نکته مهم درباره ارتفاع وابسته بودن آن به display عنصر می‌باشد که باید مدنظر قرار داده شود. برای مثال ارتفاعی که برای عناصر inline تعیین شود نادیده گرفته می‌شود برای کسب اطلاع بیشتر مشخصه display را نیز بخوانید و از کاری که می‌خواهید انجام دهید مطمئن شوید.

پیشنهاد می کنیم که برای استفاده دقیق تر از این مشخصه، درباره مشخصه box-sizing اطلاعات کسب کنید. 

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند