css - weschool - www w3schools com html5




ارتفاع CSS بنسبة 100٪ مع الحشو/الهامش (8)

الحدود حول div ، بدلاً من هامش الصفحة

حل آخر - أردت فقط حدًا بسيطًا حول حافة صفحتي ، وأردت ارتفاعًا بنسبة 100٪ عندما كان المحتوى أصغر من ذلك.

لم يعمل صندوق الحدود ، ويبدو أن الوضع الثابت خاطئ لمثل هذه الحاجة البسيطة.

انتهى بي الأمر بإضافة حد إلى الحاوية ، بدلاً من الاعتماد على هامش نص الصفحة - يبدو كالتالي:

body, html {
    height: 100%;
    margin: 0;
}

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}

هذا كان يقودني إلى الجنون لبضعة أيام الآن ، لكن في الواقع إنها مشكلة أصبت بها وسهلت على مدى السنوات القليلة الماضية: مع HTML / CSS كيف يمكنني إنشاء عنصر يحتوي على عرض و / أو الارتفاع الذي يمثل 100٪ من عنصره الرئيسي ولا يزال يحتوي على حشو مناسب أو هوامش؟

تعني كلمة "مناسبة" أنه إذا كان عنصر والدي الرئيسي height = 100% 190px وطول height = 100% مع padding = 5px 190px فإنني أتوقع أن أحصل على عنصر مرتفع 190px مع border = 5px 190px على جميع الجوانب ، متمركزًا جيدًا في العنصر الرئيسي .

الآن ، أعلم أن هذا ليس كيف يحدد نموذج الصندوق القياسي أنه يجب أن يعمل (على الرغم من أنني أرغب في معرفة السبب ، بالضبط ...) ، لذلك لا تعمل الإجابة الواضحة:

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

ولكن يبدو لي أنه يجب أن يكون هناك طريقة لإنتاج هذا التأثير بشكل موثوق لأحد الوالدين من الحجم التعسفي. هل يعرف أحد عن طريقة لإنجاز هذه المهمة (التي تبدو بسيطة)؟

أوه ، وللحصول على السجل ، لست مهتمًا بشكل كبير بتوافق IE بحيث ينبغي (نأمل) أن يجعل الأمور أسهل قليلاً.

تعديل: منذ طرح مثال ، هنا هو أبسط ما يمكن التفكير فيه:

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

ويتمثل التحدي بعد ذلك في إظهار الصندوق الأسود مع حشوة سعة 25 بيكسل على جميع الحواف بدون زيادة حجم الصفحة بشكل كبير بحيث تتطلب أشرطة التمرير.


أفضل طريقة مع الخاصية () calc. لذا ستبدو حالتك كما يلي:

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

بسيطة ، نظيفة ، لا توجد حلول. فقط تأكد من أنك لا تنس المسافة بين القيم والمشغل (على سبيل المثال (100٪ -5px) التي ستكسر بناء الجملة.


تعلمت كيفية القيام بهذا النوع من الأشياء التي تقرأ " أنماط HTML و CSS تصميم CSS ". إن display:block هي قيمة العرض الافتراضية لـ div ، لكني أحب أن أجعلها صريحة. يجب أن تكون الحاوية من النوع الصحيح ؛ سمة position fixed أو relative أو absolute .

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}
<div class="stretchedToMargin">
  Hello, world
</div>

Fiddle بواسطة comment نوشو


حل آخر هو استخدام العرض: الجدول الذي لديه سلوك نموذج مربع مختلفة.

يمكنك ضبط الارتفاع والعرض على الأصل وإضافة الحشو بدون توسيعه. الطفل لديه 100 ٪ ارتفاع وعرض ناقص البطانات.

JSBIN

خيار آخر هو استخدام بروبيرتي مربع التحجيم. المشكلة الوحيدة مع كليهما أنها لا تعمل في IE7.


مثال فرانك في حيرة لي قليلا - لم تنجح في حالتي لأنني لم أفهم وضع جيد بما فيه الكفاية حتى الآن. من المهم أن نلاحظ أن عنصر الحاوية الأصل يحتاج إلى وضع غير ثابت (ذكر ذلك ولكنني تجاهلت ذلك ، ولم يكن في مثاله).

في ما يلي مثال حيث تستخدم المساحة الممنوحة للأطفال والحدود - الموضع المطلق لملء الأصل 100٪. يستخدم الأصل المواقع النسبية من أجل توفير نقطة مرجعية لموضع الطفل مع البقاء في التدفق العادي - لا يتأثر العنصر التالي "محتوى أكثر":

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

link مفيد للتعلم السريع لتحديد المواقع CSS


هذا هو واحد من البلاهة الصريحة CSS - لم أفهم حتى الآن المنطق (إذا كان شخص ما يعرف ، الثابتة والمتنقلة. تفسر).

يعني 100٪ 100٪ من ارتفاع الحاوية - التي تتم إضافة أي هوامش لها وحدودها وحشوها. لذلك من المستحيل فعليًا الحصول على حاوية تملأ الشركة الأم ولها هامش أو حدود أو حشوة.

لاحظ أيضًا أن ضبط الارتفاع غير متناسق بشكل كبير بين المتصفحات أيضًا.

شيء آخر تعلمته منذ نشر هذا هو أن النسبة المئوية هي نسبة طول الحاوية ، أي أنها عرض ، مما يجعل النسبة أكثر قيمة للارتفاع.

في الوقت الحاضر ، تعد وحدات viewbar vh و vw أكثر فائدة ، ولكنها لا تزال غير مفيدة بشكل خاص بخلاف الحاويات ذات المستوى الأعلى.


وفقًا لارتفاع مواصفة w3c يشير إلى ارتفاع المساحة القابلة للعرض ، على سبيل المثال على شاشة دقة وضوح 1280 × 1024 بكسل 100٪ ارتفاع = 1024 بيكسل.

يشير الحد الأدنى للارتفاع إلى إجمالي ارتفاع الصفحة بما في ذلك المحتوى على الصفحة حيث يكون المحتوى أكبر من 1024 بكسل كحد أدنى: سيتم تمديد 100٪ لتضمين كل المحتوى.

المشكلة الأخرى إذن هي أن الحشو والحدود يضافان إلى الارتفاع والعرض في معظم المتصفحات الحديثة باستثناء ie6 (أي 6 في الواقع منطقي تماما ولكن لا يتوافق مع المواصفات). وهذا ما يسمى نموذج مربع. لذلك إذا قمت بتحديد

min-height: 100%;
padding: 5px; 

ستعطيك فعليًا 100٪ + 5px + 5px للارتفاع. للالتفاف على هذا تحتاج إلى حاوية المجمع.

<style>
    .FullHeight { 
       height: auto !important; /* ie 6 will ignore this */
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
    }

    .Padded {
       padding: 5px;
    }
</style>

<div class="FullHeight">
   <div class="Padded">
      Hello i am padded.
   </div
</div>

1. الارتفاع الكامل مع padding

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>

2. الارتفاع الكامل مع margin

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}
<div class="container">Hello world.</div>

3. الارتفاع الكامل مع border

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>







css