🔹 Min-Height چیه؟

ویژگی min-height حداقل ارتفاع یک عنصر رو مشخص می‌کنه.
📌 یعنی ارتفاع عنصر هیچ وقت کمتر از اون مقدار نمیشه، حتی اگه محتوا کمتر باشه.

🔹 کلاس‌های Min-Height در Tailwind

• min-h-0 → 0px

• min-h-full → 100% از ارتفاع والد

• min-h-screen → 100vh (کل ارتفاع صفحه)

• min-h-min → برابر با کوچک‌ترین مقدار لازم برای محتوای داخلی

• min-h-max → برابر با بزرگ‌ترین مقدار محتوای داخلی

• min-h-fit → ارتفاع به اندازه محتوای لازم

🔹 مثال (min-height ثابت: full)

<div class="h-64 bg-gray-200">
  <div class="min-h-full bg-blue-400 text-white p-2">
    این باکس حداقل ارتفاعش برابر والدش میشه
  </div>
</div>

🔹 مثال (min-height: screen)

<div class="min-h-screen bg-green-400 flex items-center justify-center text-white">
  این باکس حداقل ارتفاعش برابر با ارتفاع صفحه است
</div>

🔹 مثال (min-height: fit)

<div class="min-h-fit bg-red-400 text-white p-2">
  متن کوتاه
</div>
<div class="min-h-fit bg-yellow-400 text-black p-2 mt-2">
  متن خیلی خیلی خیلی طولانی که ارتفاع بیشتری می‌گیره
</div>

🔹 نکته مهم

• از min-h-screen خیلی وقت‌ها برای ساختن بخش‌های تمام صفحه (full page sections) استفاده میشه.

• وقتی می‌خوای مطمئن بشی یک کارت یا باکس حتی با محتوای کم هم ظاهری یکنواخت داشته باشه، min-h عالیه.

• می‌تونی همراه با ریسپانسیو استفاده کنی:

  <div class="min-h-32 md:min-h-64 lg:min-h-96">...</div>