كيفية إنشاء div لملء كل المساحة بين div الرأس والتذييل

https://stackoverflow.com/questions/206652

03-07-2019
|

سؤال

أنا أعمل على الانتقال من استخدام الجداول لأغراض التخطيط إلى استخدام div (نعم، نعم هذا هو النقاش الرائع).لدي 3 أقسام، رأس ومحتوى وتذييل.يبلغ حجم الرأس والتذييل 50 بكسل لكل منهما.كيف أجعل قسم التذييل يبقى في أسفل الصفحة، وقسم المحتوى يملأ المساحة بينهما؟لا أرغب في ترميز ارتفاع عناصر div للمحتوى لأن دقة الشاشة يمكن أن تتغير.

المحلول

حل فليكس بوكس

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

انظر JS كمان

لغة البرمجة

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

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

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

نصائح أخرى

لتلخيص (وهذا جاء من CSS مثبت تذييل الرابط المقدم من قبل Traingamer)، وهذا هو ما كنت:

html, body 
{ 
    height: 100%; 
} 

#divHeader
{
    height: 100px;
}

#divContent
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
}

#divFooter, #divPush
{
    height: 100px; /*Push must be same height as Footer */
}

<div id="divContent">
    <div id="divHeader">
        Header
    </div>

    Content Text

    <div id="divPush"></div>
</div>
<div id="divFooter">
    Footer
</div>

لتوسيع على البائعين ميتشل الإجابة، وإعطاء محتوى طولك شعبة: 100٪ وإعطائها هامش السيارات

لشرح كامل والمثال، انظر ريان فيت في CSS مثبت تذييل .

ومنذ كنت تعرف حجم (الارتفاع) من رأس الخاص بك، ووضعها داخل شعبة المحتوى (أو استخدام الهوامش).

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

طريقة للقيام بذلك باستخدام CSS Grid:

Index.html

<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="main.css" rel="stylesheet">
  </head>
  <body>
    <main>
      <header>Header</header>
      <section>Content</section>
      <footer>Footer</footer>
    </main>
  </body>
</html>

main.css

body {
    margin: 0;
}
main {
    height: 100%;
    display: grid;
    grid-template-rows: 100px auto 100px;
}
section {
    height: 100%;
}

وإذا كنت تحاول تحقيق أقصى قدر من ارتفاع شعبة المحتوى الخاص بك، في الوظيفة CSS

والطول: 100٪؛

#footer {
 clear: both;
}

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow