ฉันมีเลย์เอาต์ 2 คอลัมน์แบบง่ายพร้อมส่วนท้ายที่ล้างทั้ง div ขวาและ left ใน markup ของฉัน ปัญหาของฉันคือฉันไม่สามารถให้ส่วนท้ายอยู่ที่ด้านล่างของหน้าในเบราว์เซอร์ทั้งหมด ใช้งานได้ถ้าเนื้อหาดันส่วนท้ายลง แต่ก็ไม่ได้เป็นเช่นนั้นเสมอไป

ในการรับท้ายกระดาษเหนียว:

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 */
}

ใช้หน่วย CSS vh!

น่าจะเป็นวิธีที่ชัดเจนและไม่แฮ็กที่จะไปเกี่ยวกับท้ายกระดาษเหนียวจะใช้ประโยชน์จากหน่วย cport viewportใหม่

ยกตัวอย่างมาร์กอัปแบบง่าย ๆ ดังต่อไปนี้:

<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  */
}

ซึ่งหมายความว่า: ให้ความสูงของเนื้อหาหารอย่างน้อย 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) IE เวอร์ชันเก่า (IE8-) และ Android (4.4-) ไม่รองรับหน่วยวิวพอร์ต ( caniuse )

3) กาลครั้งหนึ่ง webkit มีปัญหากับหน่วยวิวพอร์ตภายในกฎการคำนวณ สิ่งนี้ได้รับการแก้ไขแน่นอน ( ดูที่นี่ ) ดังนั้นจึงไม่มีปัญหา อย่างไรก็ตามหากคุณต้องการหลีกเลี่ยงการใช้ Calc ด้วยเหตุผลบางประการคุณสามารถหลีกเลี่ยงการใช้อัตรากำไรติดลบและระยะห่างระหว่างกล่องพร้อมกับขนาดกล่อง -

ชอบมาก

* {
    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>

ส่วนท้ายของเหนียวด้วย display: flex

วิธีการแก้ปัญหาแรงบันดาลใจจากส่วนท้ายเหนียวฟิลิปวอลตัน

คำอธิบาย

โซลูชันนี้ใช้ได้เฉพาะสำหรับ :

• Chrome ≥ 21.0
• Firefox ≥ 20.0
• Internet Explorer ≥ 10
• Safari ≥ 6.1

มันขึ้นอยู่กับflexจอแสดงผลการใช้ประโยชน์จากflex-growคุณสมบัติซึ่งช่วยให้องค์ประกอบที่จะเติบโตในความสูงหรือความกว้าง (เมื่อflow-directionถูกตั้งค่าเป็นอย่างใดอย่างหนึ่งcolumnหรือrowตามลำดับ) เพื่อครอบครองพื้นที่พิเศษในภาชนะ

เราจะใช้ประโยชน์จากvhหน่วยนี้ด้วยซึ่ง1vhถูกกำหนดเป็น :

1/100 ของความสูงของวิวพอร์ต

ดังนั้นความสูงของ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

ซาฟารีนิสัยใจคอ

โปรดทราบว่า Safari มีข้อผิดพลาดในการใช้งานflex-shrinkคุณสมบัติซึ่งอนุญาตให้ไอเท็มหดมากกว่าความสูงต่ำสุดที่จะต้องใช้ในการแสดงเนื้อหา ในการแก้ไขปัญหานี้คุณจะต้องตั้งค่าflex-shrinkคุณสมบัติเป็น 0 อย่างชัดเจน.contentและfooterในตัวอย่างด้านบน:

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

คุณสามารถใช้position: absoluteต่อไปที่จะนำส่วนท้ายที่ด้านล่างของหน้า แต่แล้วให้แน่ใจว่า 2 คอลัมน์ของคุณมีความเหมาะสมmargin-bottomเพื่อให้พวกเขาไม่เคยได้รับโดนส่วนท้าย

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

นี่คือวิธีการแก้ปัญหาด้วย jQuery ที่ทำงานเหมือนมีเสน่ห์ มันตรวจสอบว่าความสูงของหน้าต่างมากกว่าความสูงของร่างกาย ถ้าเป็นเช่นนั้นจะเปลี่ยนส่วนต่างของส่วนท้ายเพื่อชดเชย ทดสอบใน Firefox, Chrome, Safari และ Opera

$( 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 )

ตั้งค่า CSS สำหรับเป็น#footer:

position: absolute;
bottom: 0;

จากนั้นคุณจะต้องเพิ่มpaddingหรือmarginด้านล่างของคุณ#sidebarและ#contentเพื่อให้ตรงกับความสูงของ#footerหรือเมื่อพวกเขาทับซ้อนกัน#footerจะครอบคลุมพวกเขา

นอกจากนี้ถ้าฉันจำได้อย่างถูกต้อง IE6 มีปัญหากับbottom: 0CSS คุณอาจต้องใช้โซลูชัน JS สำหรับ IE6 (หากคุณสนใจ IE6 นั่นคือ)

โซลูชันที่คล้ายกับ@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>

index.html:

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

main.css:

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

ที่มา: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

บางครั้งฉันต้องดิ้นรนกับตัวเองและฉันมักจะพบว่าทางออกของกองกำลังทั้งหมดที่อยู่ในกันและกันเป็นทางออกที่ยุ่งเหยิง ฉันเพิ่งยุ่งกับมันเล็กน้อยและฉันพบว่าเป็นการส่วนตัวและมันก็เป็นวิธีที่ง่ายที่สุดอย่างหนึ่ง:

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

สิ่งที่ฉันชอบเกี่ยวกับเรื่องนี้คือไม่จำเป็นต้องใช้ HTML เพิ่มเติม คุณสามารถเพิ่ม CSS นี้แล้วเขียน HTML ของคุณได้ทุกเมื่อ

เนื่องจากยังไม่มีการนำเสนอโซลูชันGridนี่คือด้วยการประกาศเพียงสองรายการสำหรับองค์ประกอบหลักหากเราใช้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

รายการจะกระจายอย่างสม่ำเสมอภายในคอนเทนเนอร์จัดตำแหน่งตามแนวแกนไขว้ ระยะห่างระหว่างรายการคู่กันแต่ละคู่จะเท่ากัน รายการแรกจะถูกล้างออกด้วยขอบเริ่มต้นหลักและรายการสุดท้ายจะล้างออกด้วยขอบหลัก

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% ของความสูงวิวพอร์ต

ใช้การจัดตำแหน่งแบบสัมบูรณ์และดัชนี z เพื่อสร้างส่วนท้ายกระดาษที่ความละเอียดใด ๆ โดยใช้ขั้นตอนต่อไปนี้

• สร้าง 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>

สำหรับคำถามนี้คำตอบหลายคำตอบที่ฉันเห็นนั้นเป็นเรื่องยากลำบากใช้งานและไม่มีประสิทธิภาพดังนั้นฉันคิดว่าฉันจะลองทำดูและคิดวิธีแก้ปัญหาของตัวเองซึ่งเป็นเพียง 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 calc เพื่อคำนวณความสูงขั้นต่ำที่หน้าสามารถอยู่กับส่วนท้ายที่ด้านล่างหวังว่านี่จะช่วยให้บางคน :)

ทางออกหนึ่งคือการตั้งค่าความสูงขั้นต่ำสำหรับกล่อง แต่น่าเสียดายที่มันก็ดูเหมือนว่าจะไม่ได้รับการสนับสนุนอย่างดีจาก IE (แปลก)

ไม่มีโซลูชัน css ที่บริสุทธิ์เหล่านี้ทำงานอย่างถูกต้องกับเนื้อหาที่ปรับขนาดแบบไดนามิก (อย่างน้อยใน firefox และ Safari) เช่นหากคุณมีพื้นหลังที่ตั้งอยู่บน div คอนเทนเนอร์หน้าแล้วปรับขนาด (เพิ่มไม่กี่แถว) ตารางภายใน div ตารางสามารถยื่นออกมาจากด้านล่างของพื้นที่ที่มีสไตล์กล่าวคือคุณสามารถมีครึ่งหนึ่งของตารางเป็นสีขาวในชุดรูปแบบสีดำและครึ่งหนึ่งของตารางเป็นสีขาวเพราะทั้งแบบอักษรและสีพื้นหลังเป็นสีขาว มันไม่สามารถแก้ไขได้โดยทั่วไปกับหน้า themeroller

เค้าโครงหลายคอลัมน์ div ซ้อนกันเป็นแฮ็คที่น่าเกลียดและ div ตัวสูง / คอนเทนเนอร์ต่ำสุด 100% สำหรับส่วนท้ายของการผสานเป็นแฮ็กที่น่าเกลียดที่สุด

โซลูชันไม่มีสคริปต์เดียวที่ทำงานบนเบราว์เซอร์ทั้งหมดที่ฉันได้ลอง: ตารางที่ง่ายกว่า / สั้นกว่ามากด้วย thead (for header) / tfoot (for footer) / tbody (td's สำหรับคอลัมน์จำนวนเท่าใดก็ได้) และความสูง 100% แต่สิ่งนี้มีการรับรู้ถึงความหมายและข้อเสีย SEO (tfoot ต้องปรากฏก่อน tbody บทบาท ARIA อาจช่วยให้เครื่องมือค้นหาที่เหมาะสม)

หลายคนตอบคำถามง่าย ๆ นี้ที่นี่ แต่ฉันมีสิ่งหนึ่งที่เพิ่มเมื่อพิจารณาถึงความผิดหวังที่ฉันเป็นจนกระทั่งฉันพบสิ่งที่ฉันทำผิด

ดังที่กล่าวมาแล้วว่าวิธีที่ตรงไปตรงมาที่สุดในการทำเช่นนี้คือ ..

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;
}

อย่างไรก็ตามคุณสมบัติไม่ได้กล่าวถึงในโพสต์น่าจะเป็นเพราะมันมักจะเป็นค่าเริ่มต้นคือตำแหน่ง: คงที่ในแท็กร่างกาย ตำแหน่งญาติจะไม่ทำงาน!

ชุดรูปแบบ wordpress ของฉันถูกแทนที่การแสดงผลของร่างกายเริ่มต้นและมันทำให้ฉันสับสนเป็นเวลานานอย่างน่าสะพรึงกลัว

เธรดเก่าที่ฉันรู้ แต่ถ้าคุณกำลังมองหาโซลูชันที่ตอบสนองการเติม jQuery นี้จะช่วย:

$(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/

ฉันสร้างห้องสมุดที่ง่ายมาก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 Media Queries แต่คุณต้องเขียนสไตล์ CSS ที่แตกต่างกันด้วยตนเองสำหรับขนาดหน้าจอที่แตกต่างกันในขณะที่ไลบรารีนี้ทำงานโดยอัตโนมัติและรองรับ JavaScript พื้นฐานทั้งหมดที่สนับสนุนเบราว์เซอร์

แก้ไข โซลูชัน 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;
    }
}

ตอนนี้หากความสูงของจอแสดงผลมากกว่าความยาวเนื้อหาของคุณเราจะทำให้ส่วนท้ายคงที่ไปด้านล่างและหากไม่แสดงก็จะปรากฏขึ้นในตอนท้ายของการแสดงผลโดยอัตโนมัติตามที่คุณต้องการเลื่อนเพื่อดูนี้

และดูเหมือนว่าทางออกที่ดีกว่า JavaScript / ไลบรารีหนึ่ง

ฉันไม่เคยโชคดีกับวิธีแก้ปัญหาที่แนะนำในหน้านี้มาก่อน แต่สุดท้ายแล้วเคล็ดลับเล็ก ๆ นี้ใช้ได้ผล ฉันจะรวมมันเป็นวิธีแก้ปัญหาที่เป็นไปได้อื่น

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

โซลูชัน Flexbox

รูปแบบ Flex เป็นที่ต้องการสำหรับส่วนหัวและส่วนท้ายตามธรรมชาติ โซลูชันแบบยืดหยุ่นนี้ได้รับการทดสอบในเบราว์เซอร์ที่ทันสมัยและใช้งานได้จริง :) ใน IE11

ดู JS ซอ

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;
}

สำหรับฉันวิธีที่ดีที่สุดในการแสดง (ส่วนท้าย) คือการติดที่ด้านล่าง แต่ไม่ครอบคลุมเนื้อหาตลอดเวลา:

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

ปลั๊กอิน jQuery CROSS เบราว์เซอร์ที่กำหนดเอง - $ .footerBottom ()

หรือใช้ jQuery อย่างที่ฉันทำและตั้งค่าความสูงส่วนท้ายของคุณเป็นautoหรือไปfixไม่ว่าคุณจะชอบอะไร ปลั๊กอินนี้ใช้ตัวเลือก jQuery เพื่อให้ทำงานได้คุณจะต้องรวมไลบรารี jQuery เข้ากับไฟล์ของคุณ

นี่คือวิธีที่คุณใช้งานปลั๊กอิน นำเข้า jQuery คัดลอกรหัสของปลั๊กอิน jQuery ที่กำหนดเองนี้และนำเข้าหลังจากนำเข้า jQuery! มันง่ายมากและเรียบง่าย แต่สำคัญ

เมื่อคุณทำสิ่งที่คุณต้องทำคือเรียกใช้รหัสนี้:

$.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>

โซลูชันแบบยืดหยุ่นทำงานได้ดีสำหรับฉันจนทำให้ส่วนท้ายของกระดาษเหนียว แต่น่าเสียดายที่การเปลี่ยนร่างกายให้ใช้รูปแบบยืดหยุ่นทำให้รูปแบบหน้าเว็บของเราบางส่วนเปลี่ยนไป สิ่งที่ได้ผลที่สุดสำหรับฉันคือ:

    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/

หากคุณไม่ต้องการให้มีการแก้ไขตำแหน่งและหลังจากที่คุณหงุดหงิดบนมือถือสิ่งนี้ดูเหมือนจะใช้ได้สำหรับฉันจนถึงตอนนี้

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

#site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 2px;
    background: #32383e;
}

เพียงตั้งค่า html เป็น min-height: 100%;และposition: relative;จากนั้นposition: absolute; bottom: 0; left: 0;บนส่วนท้าย จากนั้นฉันทำให้แน่ใจว่าส่วนท้ายเป็นองค์ประกอบสุดท้ายในร่างกาย

แจ้งให้เราทราบหากสิ่งนี้ไม่ได้ผลสำหรับคนอื่นและทำไม ฉันรู้ว่าแฮ็กสไตล์ที่น่าเบื่อเหล่านี้สามารถมีพฤติกรรมแปลก ๆ ท่ามกลางสถานการณ์ต่าง ๆ ที่ฉันไม่เคยนึกถึง

ลองวางคอนเทนเนอร์ div (ที่มี overflow: auto) ล้อมรอบเนื้อหาและแถบข้าง

หากไม่ได้ผลคุณมีภาพหน้าจอหรือลิงก์ตัวอย่างที่ส่วนท้ายไม่แสดงอย่างถูกต้องหรือไม่