تعیین عرض و ارتفاع عناصر در CSS

در CSS از دو خاصیت width و height برای تعیین عرض و ارتفاع عناصر استفاده می شود. هنگام مقداردهی به این خاصیت ها می بایست واحد مورد نظر را نیز ذکر کنید که به دو صورت نسبی و ثابت قابل اعمال است.

مقداردهی ثابت

در این روش از واحد px به معنی پیکسل برای تعیین واحد استفاده می شود. برای مثال فرض کنید قصد داریم به یک divعرض و ارتفاع 200 پیکسل اختصاص دهیم.

div{
    width: 200px;
    height: 200px;
}

مقداردهی نسبی

تعیین مقداردهی نسبی با علامت % انجام می شود و به معنی نسبتی از عنصر پدر (عنصری که تگ فعلی در آن قرار دارد) مشخص می گردد.

div{
    width: 20%;
    height: 200px;
}

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

هر کدی که می نویسیم و اجرا میشه، لزوماً درست نیست!

برای تعیین ارتفاع از مقدار auto نیز می توان استفاده نمود و به این معنی می باشد که ارتفاع عنصر، به اندازه محتوای آن باشد.

div{
    width: 20%;
    height: auto;
}

یکی دیگر از روش های تعیین ارتفاع، استفاده از واحد vh می باشد که درصدی از ارتفاع مروگر می باشد و مقدار آن می تواند بین 0 تا 100 باشد. برای مثال فرض کنید قصد دارید یک div ایجاد نمایید که عرض آن به اندازه عرض صفحه و ارتفاع آن به اندازه نصف ارتفاع صفحه باشد.

div{
    width: 50%;
    height: 50vh;
}

نکته: برای تعیین عرض و ارتفاع عناصر، تنها از تکنیک های مخصوص به هریک استفاده نمایید!

حداقل و حداکثر اندازه

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

  • min-width: حداقل عرض.
  • min-height: حداقل ارتفاع.
  • max-width: حداکثر عرض.
  • max-height: حداکثر ارتفاع.

برای مثال فرض کنید قصد دارید یک div با عرض 800px طراحی کنید. در صورتیکه عرض آن را بصورت ثابت در نظر گرفته باشید و عرض مرورگر کاربر کمتر از 800 باشد، اسکرول افقی در پایین صفحه ایجاد می شود تا بتوان ادامه محتوا را مشاهده نمود، اما اگر بجای دستور width از max-width استفاده نمایید، مادامی که عرض صفحه بزرگتر از 800 باشد، عرض div مورد نظر 800 در نظر گرفته می شود و درصورتی که عرض صفحه به کمتر از 800 برسد، عرض div معادل 100% خواهد بود که همین امر باعث عدم نمایش اسکرول افقی می گردد.

div{
    max-width: 800px;
    height: 300px;
}

تمرین های این بخش را بعد از مطالعه مقاله background انجام دهید.