وثائق CSS قابلة للتشغيل: width وheight

Q: ما الفرق بين width: 100% وwidth: auto؟

في العنصر الكتلي، تملأ auto الحاوية بما فيها الحشو والحد. أما width: 100% فتضبط عرض المحتوى على عرض الحاوية، فتحت box-sizing: content-box الافتراضية يجعل أي حشو أو حد العنصر يتجاوز الحاوية.

Q: ما الفرق بين width وmax-width؟

تضبط width حجمًا محددًا. أما max-width فتضبط حدًا أعلى: يمكن أن يكون العنصر أضيق، على الهاتف مثلًا، لكنه لا يكون أعرض أبدًا. width: 100%; max-width: 600px; تملأ الشاشات الصغيرة وتتوقف عند 600px في الكبيرة.

Q: كيف أجعل العنصر بارتفاع الشاشة كاملة؟

استخدم min-height: 100vh (أو 100dvh كي تُحتسب أشرطة أدوات متصفح الهاتف). استخدام min-height بدل height يسمح للقسم بأن يكبر إذا كان محتواه أطول من الشاشة.

ضبط العرض والارتفاع

تضبط width وheight حجم صندوق المحتوى للعنصر. افتراضيًا يُضاف الحشو والحد خارج ذلك الحجم.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Width and height</title>
  <style>
    .box {
      width: 240px;
      height: 80px;
      background: #2563eb;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="box" id="box"></div>
  <script>
    const box = document.getElementById('box');
    box.textContent = 'width 240px + padding = ' + box.offsetWidth + ' x ' + box.offsetHeight + 'px';
  </script>
</body>
</html>

الصندوق 260 في 100 بكسل: 240 في 80 للمحتوى إضافةً إلى 10px من الحشو على كل جانب. مع box-sizing: border-box سيكون 240 في 80 بالضبط؛ وتشرح صفحة نموذج الصندوق الحالتين.

القيم

القيمة	مثال	المعنى
`auto`	`width: auto`	الافتراضي. العناصر الكتلية تملأ عرض حاويتها؛ والارتفاع يناسب المحتوى
طول	`300px`، `20rem`	حجم ثابت
نسبة مئوية	`50%`	من عرض الكتلة الحاوية (لـ `width`) أو ارتفاعها (لـ `height`)
وحدات الشاشة	`100vh`، `50vw`، `100dvh`	من نافذة المتصفح
`min-content`	`width: min-content`	أضيق ما يمكن، وأطول كلمة هي التي تحدد
`max-content`	`width: max-content`	بعرض المحتوى على سطر واحد
`fit-content`	`width: fit-content`	مثل `max-content`، لكن لا يتجاوز عرض الحاوية أبدًا

لماذا لا تفعل height: 100% شيئًا

يحتاج height بالنسبة المئوية إلى أب له ارتفاع محدد كي يكون نسبة منه. وحين يكون ارتفاع الأب auto، وهي الحالة المعتادة، تتصرف height: 100% للابن كـ auto أيضًا.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height 100%</title>
  <style>
    .parent { background: #e5e7eb; padding: 6px; margin-bottom: 12px; display: flow-root; }
    .fixed { height: 120px; }
    .child { height: 100%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Parent height auto: 100% is ignored</div>
  </div>
  <div class="parent fixed">
    <div class="child">Parent height 120px: 100% works</div>
  </div>
</body>
</html>

الابن الأول طوله بطول نصه فقط. أما الثاني فيملأ أباه لأن للأب ارتفاعًا. لكي تعمل سلسلة الصفحة كلها بالنسب المئوية، يحتاج كل سلف حتى html وbody إلى ارتفاع، ولهذا تستخدم معظم التخطيطات flexbox أو grid بدلًا من ذلك: فأبناؤهما يتمددون ليملؤوا المساحة من دون أي نسبة مئوية.

min-height وmax-width: أحجام مرنة

الأحجام الثابتة تنكسر بسهولة: الارتفاع الثابت يفيض حين يكون النص أطول من المتوقع، والعرض الثابت أعرض من الهاتف. خصائص min- وmax- تضبط حدودًا بدل أحجام محددة.

الخاصية	المعنى
`min-width`	لا يكون أضيق من هذا أبدًا
`max-width`	لا يكون أعرض من هذا أبدًا
`min-height`	لا يكون أقصر من هذا أبدًا، لكن يمكنه النمو
`max-height`	لا يكون أطول من هذا أبدًا (المحتوى الزائد يفيض)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    .card {
      max-width: 360px;   /* narrower on small screens, never wider */
      min-height: 50px;   /* at least 50px, grows with content */
      border: 2px solid #2563eb;
      padding: 10px;
      margin-bottom: 12px;
    }
    .fixed {
      max-width: 360px;
      height: 50px;       /* fixed: long text spills out */
      border: 2px solid #f59e0b;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="card">Short card: the 50px minimum.</div>
  <div class="card">A card with much more text. It keeps its 360px limit but grows taller, because min-height sets a floor, not a fixed size. The border stays around all of the text, however many lines there are. Add another sentence here and the card simply gets taller again.</div>
  <div class="fixed">A fixed height of 50px with long text. The text no longer fits, so it spills past the amber border and over whatever comes next on the page. A fixed height cannot know how long the text will be, or how large the reader has set the font.</div>
</body>
</html>

على شاشة أضيق من 360px، كالهاتف، تنكمش البطاقات معها، لأن max-width مجرد سقف.

حين ينطبق حجم وحد معًا، تفوز الحدود: max-width تتغلب على width، وmin-width تتغلب على max-width.

الفرق بين width: auto وwidth: 100%

في العنصر الكتلي، ترك width على auto هو غالبًا ما تريده. تُدخل auto الصندوق كله، بحشوه وحده، في الحاوية. أما 100% فتجعل المحتوى بعرض الحاوية ثم تضيف الحشو والحد فوقه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto vs 100%</title>
  <style>
    .container { width: 300px; background: #e5e7eb; padding: 8px 0; }
    .item { padding: 10px; border: 3px solid #2563eb; margin: 6px 0; }
    .auto { width: auto; }
    .full { width: 100%; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item auto">width: auto, fits</div>
    <div class="item full">width: 100%, overflows</div>
  </div>
  <p id="out"></p>
  <script>
    const w = (s) => document.querySelector(s).offsetWidth;
    document.getElementById('out').textContent =
      'container 300px, auto ' + w('.auto') + 'px, 100% ' + w('.full') + 'px';
  </script>
</body>
</html>

تبقى width: 100% مفيدة على العناصر غير الكتلية افتراضيًا (<input>، <img>، عنصر inline-block)، ويُفضّل أن تكون مع box-sizing: border-box.

التحجيم حسب المحتوى: fit-content

لجعل عنصر كتلي بعرض نصه فقط، من دون تحويله إلى inline-block، استخدم fit-content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fit-content</title>
  <style>
    div { background: #16a34a; color: white; padding: 6px 10px; margin-bottom: 8px; }
    .fit { width: fit-content; }
    .min { width: min-content; }
  </style>
</head>
<body>
  <div>auto: full width</div>
  <div class="fit">fit-content: as wide as the text</div>
  <div class="min">min-content: one word per line</div>
</body>
</html>

تُوسِّط fit-content مع margin-inline: auto تسمية أو كتلة تشبه الزر تبقى بعرض نصها بالضبط.

أقسام بارتفاع كامل ووحدات الشاشة

vh تساوي 1% من ارتفاع نافذة العرض، وvw تساوي 1% من عرضها. على الهواتف يكبر شريط عنوان المتصفح ويصغر أثناء التمرير، لذلك قد تكون 100vh أطول مما تراه. الوحدة الديناميكية dvh تتبع المساحة المرئية، وsvh تستخدم أصغر ارتفاع مرئي:

.hero {
  min-height: 100vh;  /* fallback */
  min-height: 100dvh; /* follows mobile toolbars */
}

استخدم min-height لا height للأقسام بملء الشاشة، كي تحصل الشاشة الصغيرة ذات النص الكثير على قسم يكبر. الارتفاع الثابت مع محتوى لا يتسع يجعله يفيض، وهذا ما تعالجه صفحة overflow في CSS.

أخطاء شائعة

height: 100% داخل أب بلا ارتفاع. تتصرف كـ auto. أعطِ الأب ارتفاعًا أو استخدم flex أو grid.
width: 100% مع حشو. يتجاوز العنصر حاويته. اترك عرض العناصر الكتلية على auto، أو استخدم box-sizing: border-box.
ارتفاعات ثابتة على حاويات النص. استخدم min-height كي لا يفيض النص الأطول أو الخط الأكبر.
width على عنصر سطري. يتجاهل <span> و<a> الخاصيتين width وheight؛ اجعلهما inline-block أو block.
width: 1200px على غلاف الصفحة. يتمرر أفقيًا على كل هاتف. استخدم max-width: 1200px بدلًا منه.

الأسئلة الشائعة

لماذا لا تعمل height: 100%؟

الارتفاع بالنسبة المئوية نسبة من ارتفاع الأب، ولا يعمل إلا حين يكون ذلك الارتفاع محددًا. إذا كان ارتفاع الأب auto (يتحدد بمحتواه) تُعامل النسبة كـ auto. أعطِ الأب ارتفاعًا، أو استخدم flexbox أو grid، فهما يمطّان الأبناء من دون نسب مئوية.

ما الفرق بين width: 100% وwidth: auto؟

في العنصر الكتلي، تملأ auto الحاوية بما فيها الحشو والحد. أما width: 100% فتضبط عرض المحتوى على عرض الحاوية، فتحت box-sizing: content-box الافتراضية يجعل أي حشو أو حد العنصر يتجاوز الحاوية.

ماذا تفعل min-height في CSS؟

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

ما الفرق بين width وmax-width؟

تضبط width حجمًا محددًا. أما max-width فتضبط حدًا أعلى: يمكن أن يكون العنصر أضيق، على الهاتف مثلًا، لكنه لا يكون أعرض أبدًا. width: 100%; max-width: 600px; تملأ الشاشات الصغيرة وتتوقف عند 600px في الكبيرة.

كيف أجعل العنصر بارتفاع الشاشة كاملة؟

استخدم min-height: 100vh (أو 100dvh كي تُحتسب أشرطة أدوات متصفح الهاتف). استخدام min-height بدل height يسمح للقسم بأن يكبر إذا كان محتواه أطول من الشاشة.

مفاهيم ذات صلة