الفرق بين height و min-height

أولا height (الارتفاع) :

• يحدد الارتفاع الثابت للعنصر
• إذا كان المحتوى أكبر من الارتفاع المحدد فسيخرج باقى المحتوى عن العنصر 
• المثال التالي سيعطي العنصر ارتفاع ثابتًا قدره 200 بكسل :

   div { 
     height: 200px; 
  }

أما min-height (الحد الأدنى للارتفاع) :

• فمكا يظهر من إسمه أنه يحدد الحد الأدنى للارتفاع الذي يمكن أن يكون عليه العنصر.
• حيث إذا كان المحتوى أقل من طول min-height سيلتزم طول العنصر بال min-height ولو كان أكبر من min-height سيتوسع العنصر ليتناسب مع المحتوى.
• إذا هو يضمن أن العنصر لن يكون أبدا أصغر من القيمة المحددة.
• المثال التالي يعني أن العنصر سيكون على الأقل 200 بكسل، ولكن يمكن أن يكون أطول إذا لزم الأمر :

  div { 
    min-height: 200px; 
  }

إذا فإن height  طول ثابت لا يتغير بتغير محتوى العنصر أما min-height مرن حيث الطول لا يقل عن الطول المحدد ولكنه يمكن أن يتوسع ويطول عند الحاجة. ولذلك فإن min-height أكثر مرونة في التصميمات المتجاوبة.

height من الاسم تعني تحديد إرتفاع العنصر، أي بتحديد قيمة ثابتة سيكون ذلك هو الارتفاع النهائي للعنصر بغض النظر عن محتواه أو العوامل الأخرى، ما لم يتم تجاوزه بواسطة خصائص أخرى مثل max-height أو المحتوى الزائد مع overflow.

بالتالي لو المحتوى أكبر من الارتفاع المحدد، فسيتسبب ذلك في التدفق الزائد overflow إن لم يتم التعامل معه بتحديد تنسيق overflow: auto له.

div {
  height: 100px;
}

لاحظ العنصر سيكون دائمًا بارتفاع 100 بكسل، حتى لو كان المحتوى أصغر أو أكبر.

بينما min-height يحدد الحد الأدنى لارتفاع العنصر، أي يسمح للعنصر بأن يكون أطول من القيمة المحددة إذا تطلب المحتوى ذلك، لكنه لن يكون أقصر من القيمة المحددة.

نستفيد من ذلك بضمان أن العنصر لن يصبح أصغر من ارتفاع معين لكي لا يتشوه التصميم أو يحدث مشكلة في عرض المحتوى، ولكن متاح له أن يتوسع لو المحتوى يحتاج إلى مساحة أكبر.

div {
  min-height: 100px;
}

وبالطبع تستطيع توظيف height وmin-height معًا، حيث يتأكد min-height من أن الارتفاع لا يقل عن قيمة معينة، بينما height يحدد الارتفاع الافتراضي.

وفي حال قيمة min-height أكبر، فخاصية min-height ستتغلب على height.

لتوضيح أهمية ال min-height  افترض أن لديك مجموعة من البطاقات (cards) في صفحة، كل بطاقة تحتوي على عنوان، صورة، ووصف. بعض الأوصاف قد تكون قصيرة جدًا، والبعض الآخر قد يكون طويلًا.

فإذا استخدمت height ثابتًا، فإن البطاقات ذات الأوصاف القصيرة ستبدو فارغة من الأسفل، والبطاقات ذات الأوصاف الطويلة ستتعرض لتجاوز المحتوى. باستخدام min-height على البطاقة أو على قسم الوصف بداخلها، تضمن أن جميع البطاقات لها حد أدنى من الارتفاع (مما يجعلها تبدو متناسقة)، ولكنها تتمدد تلقائيًا لاستيعاب الأوصاف الطويلة، مما يمنع التجاوز.