html - w3schools - 100٪ أقل ارتفاع مخطط CSS



w3schools html reference pdf (9)

ربما أقصر حل (يعمل فقط في المتصفحات الحديثة)

تعمل هذه القطعة الصغيرة من CSS على "the middle content part fill 100% of the space in between with the footer fixed to the bottom" :

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

الشرط الوحيد هو أن تحتاج إلى تذييل مرتفع ثابت.

على سبيل المثال لهذا التنسيق:

<html><head></head><body>
  <main> your main content </main>
  </footer> your footer content </footer>
</body></html>

أنت بحاجة إلى هذا CSS:

html, body { height: 100%; }
main { min-height: calc(100% - 2em); }
footer { height: 2em; }

ما هي أفضل طريقة لجعل عنصر يبلغ الحد الأدنى للارتفاع 100٪ عبر مجموعة كبيرة من المتصفحات؟ على وجه الخصوص ، إذا كان لديك تخطيط مع رأس وتذييل للارتفاع الثابت ، فكيف تملأ الجزء المتعلق بالمحتوى الأوسط بنسبة 100٪ من المساحة بين التذييل وثبت في الأسفل؟


Answer #1

أتفق مع Levik حيث تم تعيين الوعاء الأصلي على 100٪ إذا كان لديك sidebars وتريد أن تملأ الفراغ للالتقاء مع التذييل لا يمكنك تعيينه إلى 100٪ لأنه سيكون 100 بالمائة من ارتفاع الأم أيضا يعني أن التذييل ينتهي بالضغط عليه عند استخدام الوظيفة الواضحة.

فكر في الأمر بهذه الطريقة إذا كان طول رأسك يبلغ 50 بكسل وطول ارتفاعه 50 بكسل ، وكان المحتوى يتم إرساله تلقائيًا إلى المساحة المتبقية على سبيل المثال 100 بكسل على سبيل المثال وحاوية الصفحة 100٪ من هذه القيمة سيكون ارتفاعها 200 بكسل. عند ضبط ارتفاع الشريط الجانبي على 100٪ ، يكون 200 بكسل على الرغم من أنه من المفترض أن يكون مناسبًا بين الرأس والتذييل. وبدلاً من ذلك ، تصبح في النهاية 50 بكسل + 200 بكسل + 50 بكسل ، بحيث تكون الصفحة الآن 300 بكسل لأن الأشرطة الجانبية معيّنة على نفس ارتفاع حاوية الصفحة. سيكون هناك مساحة بيضاء كبيرة في محتويات الصفحة.

أنا أستخدم Internet Explorer 9 وهذا ما أتحصل عليه كتأثير عند استخدام هذه الطريقة 100٪. لقد حاولت ذلك في المتصفحات الأخرى وأفترض أنه قد يعمل في بعض الخيارات الأخرى. لكنها لن تكون عالمية.



Answer #3

جرب هذا:

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

يجب أن يكون عنصر div أسفل محتوى div clear:both .


Answer #4

كما ذكرنا في إجابة أفشين مهرباني ، يجب عليك ضبط ارتفاع الجسم و html إلى 100٪ ، ولكن للحصول على التذييل هناك ، قم بحساب ارتفاع الغلاف:

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}

Answer #5

لتعيين ارتفاع مخصص مؤمن في مكان ما:

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}
<div id="outerbox">
  <div id="innerbox"></div>
</div>


Answer #6

مجرد مشاركة ما تم استخدامه ، ويعمل بشكل جيد

#content{
        height: auto;
        min-height:350px;
}

Answer #7

يجب عليك أولاً إنشاء div مع id='footer' بعد div content الخاص بك ثم القيام بذلك ببساطة.

يجب أن يكون HTML الخاص بك كما يلي:

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

و CSS:

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

Answer #8

#content { min-height: 100%; } حل CSS خالص ( #content { min-height: 100%; } ) في الكثير من الحالات ، ولكن ليس في كل منها - خاصة IE6 و IE7.

لسوء الحظ ، سوف تحتاج إلى اللجوء إلى حل JavaScript للحصول على السلوك المطلوب. يمكن القيام بذلك عن طريق حساب الارتفاع المطلوب للمحتوى الخاص بك <div> وتعيينه كخاصية CSS في إحدى الوظائف:

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

يمكنك بعد ذلك تعيين هذه الوظيفة onResize للأحداث onLoad و onResize :

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>




xhtml