كيف تحصل على تذييل البقاء في الجزء السفلي من صفحة ويب ؟

Question

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

تحديث:

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

Answer 1

للحصول على تذييل لزجة:

1. لديك <div> مع class="wrapper" للمحتوى الخاص بك.

2. صحيح قبل إغلاق </div> من wrapper مكان <div class="push"></div>.

3. صحيح بعد إغلاق </div> من wrapper مكان <div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Answer 2

استخدام CSS vh الوحدات!

ربما الأكثر وضوحا وغير hacky طريقة للذهاب نحو تذييل لزجة الاستفادة من الجديد css وحدات المعاينة.

خذ على سبيل المثال ما يلي العلامات بسيطة:

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

إذا كان رأس أقول 80px عالية و تذييل 40px عالية ، ثم يمكننا أن نجعل لدينا تذييل لزجة مع قاعدة واحدة واحدة على محتوى div:

.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

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

هذا هو.

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

...وهنا كيف نفس الكود يعمل مع الكثير من المحتوى في المحتوى div:

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
    This is my footer
</footer>

ملحوظة::

1) ارتفاع رأس وتذييل الصفحة يجب أن تكون معروفة

2) الإصدارات القديمة من إنترنت إكسبلورر (IE8) و الروبوت (4.4-) لا تدعم منفذ العرض الوحدات.(caniuse)

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

مثل ذلك:

* {
    margin:0;padding:0;
}
header {
    background: yellow;
    height: 80px;
    position:relative;
}
.content {
    min-height: 100vh;
    background: pink;
    margin: -80px 0 -40px;
    padding: 80px 0 40px;
    box-sizing:border-box;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">Lorem ipsum 
</div>
<footer>
    This is my footer
</footer>

Answer 3

تذييل لزجة مع display: flex

الحل مستوحاة من فيليب والتون تذييل لزجة.

تفسير

هذا الحل هو صالحة فقط لمدة:

• كروم ≥ 21.0
• فايرفوكس ≥ 20.0
• Internet Explorer ≥ 10
• سفاري ≥ 6.1

لأنه يقوم على flex عرض, والاستفادة flex-grow الممتلكات التي يسمح عنصر إلى تنمو إما ارتفاع أو العرض (عندما flow-direction يتم تعيين إما column أو row على التوالي), تحتل مساحة إضافية في الحاوية.

نحن ذاهبون إلى النفوذ أيضا vh الوحدة ، حيث 1vh هو تعريف:

1/100th من ارتفاع العرض

وبالتالي ارتفاع 100vh انها طريقة موجزة أقول عنصر تمتد على كامل العرض في الطول.

هذا هو كيف يمكنك أن هيكل صفحة الويب الخاصة بك:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

من أجل أن يكون تذييل عصا إلى أسفل الصفحة ، تريد المسافة بين الجسم و تذييل أن تنمو بقدر ما يلزم دفع تذييل الصفحة في أسفل الصفحة.

ولذلك لدينا تخطيط يصبح:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

تنفيذ

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}

<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

يمكنك أن تلعب معها في على JSFiddle.

سفاري المراوغات

تكون على علم بأن سفاري لديه معيبة تنفيذ flex-shrink الملكية, الذي يسمح البنود يتقلص أكثر من ارتفاع الحد الأدنى اللازم لعرض المحتوى.لإصلاح هذه المشكلة سيكون لديك لتعيين flex-shrink الملكية صراحة إلى 0 إلى .content و footer في المثال أعلاه:

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }

Answer 4

هل يمكن استخدام position: absolute بعد أن وضعت تذييل الصفحة في أسفل الصفحة ، ولكن بعد ذلك تأكد من الخاص بك 2 الأعمدة المناسبة margin-bottom بحيث أنها لم تحصل على المغطي قبل تذييل الصفحة.

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

Answer 5

هنا هو الحل مع مسج التي تعمل مثل السحر.فإنه يتحقق إذا كان ارتفاع النافذة أكبر من ارتفاع الجسم.إذا كان, ثم يتغير الهامش-رأس وتذييل للتعويض.اختبار في فايرفوكس, كروم, سفاري و أوبرا.

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

إذا تذييل الصفحة الخاصة بك بالفعل على هامش قمة (50 بكسل ، على سبيل المثال) سوف تحتاج إلى تغيير الجزء الأخير من أجل:

css( 'margin-top', height_diff + 50 )

Answer 6

تعيين CSS ل #footer إلى:

position: absolute;
bottom: 0;

ثم سوف تحتاج إلى إضافة padding أو margin إلى أسفل #sidebar و #content لتتناسب مع ارتفاع #footer أو عندما تتداخل ، #footer سوف تغطي عليها.

أيضا, إذا كنت أتذكر بشكل صحيح ، IE6 لديه مشكلة مع bottom: 0 CSS.قد تحتاج إلى استخدام شبيبة حل IE6 (إذا كنت تهتم IE6 هو).

Answer 7

حل مماثل إلى @gcedo ولكن من دون الحاجة إلى إضافة وسيطة المحتوى من أجل دفع تذييل الصفحة إلى أسفل.يمكننا ببساطة إضافة margin-top:auto إلى تذييل الصفحة وسوف تكون دفعت إلى أسفل الصفحة بغض النظر عن طوله أو ارتفاع محتوى أعلاه.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}

<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>

Answer 8

استخدام المواقع المطلق و z-index إنشاء تذييل لزجة div في أي قرار باستخدام الخطوات التالية:

• إنشاء تذييل div مع position: absolute; bottom: 0; و الارتفاع المطلوب
• تعيين الحشو من تذييل الصفحة لإضافة فاصل بين المحتوى أسفل النافذة السفلي
• إنشاء حاوية div أن يلتف الجسم مع المحتوى position: relative; min-height: 100%;
• إضافة السفلي الحشو إلى المحتوى الرئيسي div التي تساوي بالإضافة إلى ارتفاع الحشو من تذييل الصفحة
• تعيين z-index من تذييل أكبر من الحاويات div إذا تذييل هو قص

هنا مثال:

    <!doctype html>
    <html>
    <head>
      <title>Sticky Footer</title>
      <meta charset="utf-8">
      <style>
      .wrapper { position: relative; min-height: 100%; }
      .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
      .column { height: 2000px; padding-bottom: 300px; background-color: green; }
     /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */

      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="column">
          <span>hello</span>
        </div>
        <div class="footer">
          <p>This is a test. This is only a test...</p>
        </div>
      </div>
    </body>
    </html>

Answer 9

محاولة وضع وعاء شعبة (مع overflow:auto) حول محتوى الشريط الجانبي.

إذا كان هذا لا يعمل, هل لديك أي لقطات أو صلات سبيل المثال حيث تذييل الصفحة لا يتم عرض بشكل صحيح ؟

Answer 10

واحد حل تعيين min-height للصناديق.للأسف يبدو أن انها ليست مدعومة بشكل جيد من قبل أي (مفاجأة).

Answer 11

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

متداخلة div متعددة تخطيط العمود قبيح هاك 100% min-height الجسم/حاوية div بسبب إصرارها تذييل هو أقبح هاك.

فقط لا شيء-سيناريو الحل الذي يعمل على جميع المتصفحات جربت:وهو أبسط من ذلك بكثير/أقصر الجدول مع thead (على رأس)/tfoot (على تذييل)/tbody (td أجل أي عدد من الأعمدة) ، 100% ارتفاع.ولكن هذا قد ينظر الدلالي وكبار المسئولين الاقتصاديين عيوب (tfoot يجب أن تظهر قبل tbody.آريا الأدوار قد تساعد الكريم محركات البحث على الرغم من).

Answer 12

CSS :

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

           <div id="container">
               <div class="footer">
               </div>
           </div>

هذا ينبغي أن تفعل خدعة إذا كنت تبحث عن مجيب تذييل الانحياز في الجزء السفلي من الصفحة التي يحتفظ دائما أعلى هامش 80% من العرض والطول.

Answer 13

هذا السؤال العديد من الإجابات التي رأيتها عالي الكعب ، من الصعب تنفيذ و غير فعالة لذا فكرت أن تأخذ لقطة في ذلك والخروج مع بلدي الحل الذي هو مجرد جزء صغير من css و html

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}

<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

هذا يعمل عن طريق تحديد ارتفاع تذييل الصفحة ثم باستخدام css احسب للعمل على الحد الأدنى من الارتفاع الصفحة يمكن أن يكون مع تذييل الصفحة لا تزال في الجزء السفلي ، ويساعد هذا الأمل بعض الناس :)

Answer 14

أنا شخصيا عانيت من هذا في بعض الأحيان و وجدت دائما أن الحل مع كل تلك div داخل بعضها البعض كان فوضوي الحل.لقد عبثت مع ذلك قليلا, و أنا شخصيا وجدت أن هذا يعمل وبالتأكيد هي واحدة من أبسط الطرق:

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

ما يعجبني في هذا هو أنه لا يوجد إضافية HTML يجب أن تطبق.يمكنك ببساطة إضافة هذا CSS ومن ثم كتابة HTML الخاص بك حيث كلما

Answer 15

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

كما ذكر طريقة مباشرة هل هذا هو مثل ذلك..

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

ومع ذلك العقار لم يرد ذكرها في المشاركات ، ويفترض لأنه عادة ما يكون الافتراضي ، الموقف:ثابت على الجسم الوسم.موقف النسبية لا تعمل!

بلدي وورد موضوع قد تجاوز الافتراضي لعرض الجسم و الخلط لي بغيض طويلا.

Answer 16

قديم الموضوع أعرف, ولكن إذا كنت تبحث عن مجيب حل هذا مسج ذلك سوف يساعد على:

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

دليل كامل يمكن العثور عليها هنا: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

Answer 17

لقد خلق بسيط جدا مكتبة https://github.com/ravinderpayal/FooterJS

وهو بسيط جدا في الاستخدام.بعد ذلك المكتبة فقط اتصل هذا الخط من التعليمات البرمجية.

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

الهوامش يمكن تغيير حيوي بالتذكير فوق وظيفة مختلفة مع المعلمة/id.

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

ملاحظة:- لم تغيير أو إضافة أي CSS.مكتبة ديناميكية مما يعني أنه حتى لو يتم تغيير حجم الشاشة بعد تحميل الصفحة فإنه سيتم إعادة تعيين موقف تذييل الصفحة.لقد خلقت هذه المكتبة ، لأن CSS يحل المشكلة لفترة من الوقت ولكن عندما يكون حجم عرض التغييرات بشكل كبير من سطح المكتب إلى قرص أو العكس ، فهي إما تداخل المحتوى أو أنها لم تعد بقايا لزجة.

حل آخر هو CSS استفسارات وسائل الإعلام, ولكن يجب عليك يدويا كتابة مختلف أنماط CSS مختلفة الحجم من الشاشات في حين أن هذه المكتبة لا تعمل تلقائيا و هي مدعومة من قبل جميع الأساسية جافا سكريبت دعم المتصفح.

تحرير CSS الحل:

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

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

و يبدو حلا أفضل من جافا سكريبت/مكتبة واحدة.

Answer 18

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

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

Answer 19

Flexbox الحل

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

انظر شبيبة كمان.

HTML

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

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

Answer 20

بالنسبة لي اجمل طريقة عرض (تذييل) هو التمسك السفلي ولكن لا تغطي المحتوى في كل وقت:

#my_footer {
    position: static
    fixed; bottom: 0
}

Answer 21

مسج عبر متصفح مخصص المساعد - $.footerBottom()

أو استخدام مسج مثلي وتعيين تذييل الصفحة الخاصة بك الارتفاع إلى auto أو fix, مهما تريد ، سوف تعمل على أي حال.يستخدم هذا البرنامج المساعد مسج محددات لذا هو سيكون لديك لتشمل مكتبة مسج إلى الملف الخاص بك.

هنا هو كيف يمكنك تشغيل البرنامج المساعد.استيراد مسج, نسخ رمز من هذا العرف مسج المساعد استيراده بعد استيراد مسج!أنها بسيطة جدا وأساسية ، ولكنها مهمة.

عندما تفعل ذلك, كل ما عليك القيام به هو تشغيل هذه التعليمات البرمجية:

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

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

هنا هو رمز البرنامج المساعد الذي لا يجب أن يفهم.أعرف فقط كيفية تنفيذ ذلك.فإنه لا وظيفة لك.ومع ذلك ، إذا كنت ترغب في معرفة كيف يعمل, فقط انظر من خلال التعليمات البرمجية.تركت التعليقات بالنسبة لك.

//import jQuery library before this script

// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5

/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>

Answer 22

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

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

حصلت على هذا من ctf0 رد في https://css-tricks.com/couple-takes-sticky-footer/

Answer 23

منذ الشبكة الحل لم يعرض بعد ، ومن هنا ، الإعلانات عن العنصر الأصلي, إذا أخذنا height: 100% و margin: 0 من المسلمات:

html, body {height: 100%}

body {
  display: grid; /* generates a block-level grid */
  align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
  margin: 0;
}

.content {
  background: lightgreen;
  /* demo / for default snippet window */
  height: 1em;
  animation: height 2.5s linear alternate infinite;
}

footer {background: lightblue}

@keyframes height {to {height: 250px}}

<div class="content">Content</div>
<footer>Footer</footer>

• align-content: space-between

البنود موزعة بالتساوي في محاذاة الحاوية على طول عبر المحور.التباعد بين كل زوج من العناصر المجاورة هو نفسه.العنصر الأول هو مطاردة مع الرئيسية-بداية الحافة الأخيرة هذا البند هو مطاردة مع نهاية الحافة.

Answer 24

      div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        border: 3px solid #73AD21;
      }

  <body style="height:1500px">

    <h2>position: fixed;</h2>

    <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

    <div class="fixed">
      This div element has position: fixed;
    </div>

  </body>