كيفية جعل ارتفاع DIV يتسع بمحتواه

يتعلق هذا السؤال بتوسيع ارتفاع DIV ليناسب DIVs الداخلية الخاصة به أثناء الحفاظ على هيكل الحاوية DIV. لتحقيق هذا السلوك المرغوب، من الضروري تنفيذ تعديلات على تخطيط CSS.

يتضمن أحد الأساليب إضافة "clear: Both;" الخاصية قبل إغلاق #main_content DIV. توجه قاعدة CSS هذه المتصفح إلى تجاهل أي عناصر عائمة سابقة، مما يضمن أن #main_content له العرض الكامل المتاح في الحاوية DIV. بالإضافة إلى ذلك، يمكنك نقل العنصر
إلى #main_content DIV وتعيين CSS الخاص به على النحو التالي:

.clear {
  clear: both;
}

الحل البديل باستخدام Flexbox

البديل الأكثر حداثة هو استخدام Flexbox، وهو وضع تخطيط CSS3 الذي يتيح تخطيطات مرنة وسريعة الاستجابة. في هذا الأسلوب، يمكن تطبيق قواعد CSS التالية:

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}

بنية HTML باستخدام Flexbox:

  

     Header   
    
  

    Content