سؤال عن تحديد الـ Hight في CSS لماذا يتجاوز الـ content حدود الـ container في تصميمي؟

سالم20031 · 17 نوفمبر 2023

باختصار ياخوان عندي في البدايه ال body ارتفاعه 100vh وداخل ال body ال container و معطيه ارتفاع 600px ,وداخل ال container ال nav و ال content لكن السؤال اعطيت ال content الارتفاع 100% فحسب فهمي مفروض أقصى ارتفاع راح يكون له داخل حدود ال contianer اللي هي 600px لكن هو طلع اساسا برا ال container مثل ما هو واضح من ال border لماذا ؟؟؟؟

تم التعديل في 17 نوفمبر 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 17 نوفمبر 2023

أولاً تأكد من تطبيق خاصية box-sizing بقيمة border-box كالتالي:

*{
box-sizing: border-box
}

ثانيًا سبب المشكلة، هو أنك قمت بتحديد الطول بنسبة 100% من الـ container وهو 600px ولذلك طبيعي أن يكون طول المحتوى بالداخل هو 600 لكن يوجد عنصر nav والذي يشغل مساحة من ذلك الطول وبالتالي تجد أن content خارج الـ container بسبب عدم وجود مساحة كاملة للـ 600px.

والحل هو تحديد طول لكل من المحتوى والـ nav بنسبة 90% و10% كالتالي:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        padding: 0;
        height: 100vh;
      }

      .container {
        height: 600px;
        border: 2px solid black;
        background-color: black;
      }

      nav {
        height: 10%;
        background-color: rgb(144, 209, 230);
        padding: 10px;
      }

      .content {
        height: 90%;
        border: 2px solid red;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <nav>
        <!-- محتوى الناف -->
      </nav>
      <div class="content">
        <!-- محتوى الكونتنت -->
      </div>
    </div>
  </body>
</html>

عبدالباسط ابراهيم · 19 نوفمبر 2023

ببساطة هذا السلوط حدث بسبب الإرتفاع أو الحجم الخاص بال nav لذلك يمكننا بدلاً من استخدام الارتفاع 100% لل content نستخدم ال calc بحيث نخصم الإرتفاع الخاص بال nav مثال على ذلك

.content {
  height: calc(100% - 100px); /*هو 100 nav نفترض أن إرتفاع ال  */
}

وبالطبع يجب إضافة التنسيق

*{
box-sizing: border-box
}

كما أخبرك مصطفى في التعليق السابق

محمد سعد شحرور · 22 نوفمبر 2023

سأشرح لك الموضوع ببساطة جدا.

انت تملك container يحوي content و navbar، مما يتيح لك استخدام هذه المساحة (600px) في أي شيء تريد، بشرط ان مكونات ال container مثل ال nabvar وال content لايتجاوزو ارتفاع 600px.

احدى طرق الحل هي وضع ارتفاعات ال navbar وال content بما يتناسب مع العنصر الذي يحويهم (container)، ان كانت هذه الاقسام بال px او النسبة المئوية او غيرها.

.nav {
height: 60px
}

.content {
height: 540px
}

سؤال عن تحديد الـ Hight في CSS لماذا يتجاوز الـ content حدود الـ container في تصميمي؟

السؤال

سالم20031

3 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

عبدالباسط ابراهيم

محمد سعد شحرور

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية