Tôi có bố cục 2 cột đơn giản với chân trang giúp xóa cả div phải và trái trong đánh dấu của tôi. Vấn đề của tôi là tôi không thể đặt chân trang ở cuối trang trong tất cả các trình duyệt. Nó hoạt động nếu nội dung đẩy chân trang xuống, nhưng không phải lúc nào cũng như vậy.

Để có được một footer dính:

1. Có một <div>với class="wrapper"nội dung của bạn.

2. Ngay trước khi đóng cửa </div>của wrappernơi này <div class="push"></div>.

3. Ngay sau khi kết thúc </div>của wrappernơi này <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 */
}

Sử dụng các đơn vị CSS vh!

Có lẽ cách rõ ràng nhất và không hack để đi về một footer dính sẽ là sử dụng các đơn vị khung nhìn css mới .

Lấy ví dụ đánh dấu đơn giản sau:

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

Nếu tiêu đề có độ cao 80px và chân trang cao 40px, thì chúng ta có thể tạo chân trang dính với một quy tắc duy nhất trên div nội dung:

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

Điều đó có nghĩa là: để chiều cao của div nội dung tối thiểu 100% chiều cao của khung nhìn trừ đi chiều cao kết hợp của đầu trang và chân trang.

Đó là nó.

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

... Và đây là cách cùng một mã hoạt động với nhiều nội dung trong div nội dung:

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

Lưu ý:

1) Phải biết chiều cao của đầu trang và chân trang

2) Các phiên bản cũ của IE (IE8-) và Android (4.4-) không hỗ trợ các đơn vị chế độ xem. ( caniuse )

3) Đã có lúc webkit gặp sự cố với các đơn vị khung nhìn trong quy tắc calc. Điều này thực sự đã được sửa chữa ( xem tại đây ) vì vậy không có vấn đề ở đó. Tuy nhiên, nếu bạn đang tìm cách tránh sử dụng calc vì một số lý do, bạn có thể khắc phục điều đó bằng cách sử dụng lề âm và phần đệm với kích thước hộp -

Thích như vậy:

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

Chú thích chân với display: flex

Giải pháp lấy cảm hứng từ chân trang dính của Philip Walton .

Giải trình

Giải pháp này chỉ hợp lệ cho :

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

Nó dựa trên flexmàn hình , tận dụng thuộc flex-growtính, cho phép một phần tử tăng theo chiều cao hoặc chiều rộng (khi flow-directionđược đặt thành một columnhoặc rowtương ứng), để chiếm không gian thừa trong vùng chứa.

Chúng tôi cũng sẽ tận dụng vhđơn vị, nơi 1vhđược định nghĩa là :

1/100 chiều cao của khung nhìn

Do đó, chiều cao của 100vhnó là một cách ngắn gọn để nói cho một phần tử trải dài toàn bộ chiều cao của khung nhìn.

Đây là cách bạn sẽ cấu trúc trang web của mình:

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

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

Để có phần chân trang nằm ở cuối trang, bạn muốn khoảng trống giữa phần thân và phần chân trang sẽ phát triển hết mức cần thiết để đẩy phần chân trang ở cuối trang.

Do đó, bố cục của chúng tôi trở thành:

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

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

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

Thực hiện

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>

Bạn có thể chơi với nó tại JSFiddle .

Quirks Safari

Xin lưu ý rằng Safari có một triển khai flex-shrinkbất động sản hoàn hảo , cho phép các mục thu nhỏ hơn chiều cao tối thiểu sẽ được yêu cầu để hiển thị nội dung. Để khắc phục sự cố này, bạn sẽ phải đặt thuộc flex-shrinktính rõ ràng thành 0 thành .contentvà footertrong ví dụ trên:

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

Bạn có thể sử dụng position: absolutetheo sau để đặt chân trang ở cuối trang, nhưng sau đó hãy đảm bảo 2 cột của bạn có phù hợp margin-bottomđể chúng không bao giờ bị chặn bởi chân trang.

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

Đây là một giải pháp với jQuery hoạt động như một bùa mê. Nó kiểm tra nếu chiều cao của cửa sổ lớn hơn chiều cao của cơ thể. Nếu có, nó sẽ thay đổi lề trên của chân trang để bù lại. Đã thử nghiệm trên Firefox, Chrome, Safari và Opera.

$( function () {

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

});

Nếu chân trang của bạn đã có lề trên (ví dụ 50 pixel), bạn sẽ cần thay đổi phần cuối cùng cho:

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

Đặt CSS cho #footer:

position: absolute;
bottom: 0;

Sau đó, bạn sẽ cần thêm một paddinghoặc marginvào dưới cùng của bạn #sidebarvà #contentđể phù hợp với chiều cao của #footerhoặc khi chúng trùng nhau, #footersẽ bao phủ chúng.

Ngoài ra, nếu tôi nhớ chính xác, IE6 có vấn đề với bottom: 0CSS. Bạn có thể phải sử dụng giải pháp JS cho IE6 (nếu bạn quan tâm đến IE6).

Một giải pháp tương tự với @gcedo nhưng không cần thêm nội dung trung gian để đẩy chân trang xuống. Chúng ta chỉ cần thêm margin-top:autovào phần chân trang và nó sẽ được đẩy xuống cuối trang bất kể chiều cao của anh ta hay chiều cao của nội dung trên.

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

Nguồn: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

Đôi khi tôi đã phải vật lộn với điều này và tôi luôn thấy rằng giải pháp với tất cả những div đó trong nhau là một giải pháp lộn xộn. Tôi chỉ loay hoay với nó một chút, và cá nhân tôi phát hiện ra rằng điều này hoạt động và nó chắc chắn là một trong những cách đơn giản nhất:

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

Điều tôi thích ở đây là không cần áp dụng thêm HTML. Bạn chỉ cần thêm CSS này và sau đó viết HTML của mình bất cứ khi nào

Vì giải pháp Grid chưa được trình bày, nên ở đây, chỉ có hai khai báo cho phần tử cha , nếu chúng ta lấy height: 100%và margin: 0cho:

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

Các mục được phân phối đồng đều trong thùng chứa dọc theo trục chéo. Khoảng cách giữa mỗi cặp vật phẩm liền kề là như nhau. Mục đầu tiên được tuôn ra với cạnh bắt đầu chính và mục cuối cùng được tuôn ra với cạnh chính.

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>

Điều này sẽ thực hiện mẹo nếu bạn đang tìm kiếm một chân trang đáp ứng được căn chỉnh ở cuối trang, luôn giữ tỷ lệ cao nhất là 80% chiều cao của chế độ xem.

Sử dụng định vị tuyệt đối và chỉ mục z để tạo div chân trang ở bất kỳ độ phân giải nào bằng các bước sau:

• Tạo một div footer với position: absolute; bottom: 0;và chiều cao mong muốn
• Đặt phần đệm của chân trang để thêm khoảng trắng giữa đáy nội dung và đáy cửa sổ
• Tạo một thùng chứa divbao bọc nội dung cơ thể vớiposition: relative; min-height: 100%;
• Thêm phần đệm dưới vào nội dung chính divbằng với chiều cao cộng với phần đệm của phần chân trang
• Đặt z-indexchân trang lớn hơn vùng chứa divnếu chân trang bị cắt bớt

Đây là một ví dụ:

    <!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>

Đối với câu hỏi này, nhiều câu trả lời tôi đã thấy rất khó hiểu, khó thực hiện và không hiệu quả nên tôi nghĩ tôi đã thử và đưa ra giải pháp của riêng mình, đó chỉ là một chút css và 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>

Điều này hoạt động bằng cách đặt chiều cao của chân trang và sau đó sử dụng css calc để tính ra chiều cao tối thiểu mà trang có thể ở chân trang vẫn ở dưới cùng, hy vọng điều này sẽ giúp một số người :)

Một giải pháp sẽ là đặt chiều cao tối thiểu cho các hộp. Thật không may, có vẻ như nó không được hỗ trợ tốt bởi IE (bất ngờ).

Không có giải pháp css thuần nào này hoạt động đúng với nội dung thay đổi kích thước động (ít nhất là trên firefox và Safari), vd, nếu bạn có một nền được đặt trên div container, trang và sau đó thay đổi kích thước (thêm một vài hàng) trong bảng div, bảng có thể nhô ra khỏi đáy của khu vực được tạo kiểu, tức là bạn có thể có một nửa bảng màu trắng với chủ đề màu đen và một nửa bảng hoàn toàn màu trắng vì cả màu phông chữ và màu nền đều là màu trắng. Về cơ bản, nó không thể kết hợp được với các trang themeroller.

Bố cục nhiều cột của Nested div là một hack xấu xí và div body / container có chiều cao tối thiểu 100% để gắn chân trang là một hack xấu hơn.

Giải pháp không có tập lệnh duy nhất hoạt động trên tất cả các trình duyệt mà tôi đã thử: một bảng đơn giản hơn / ngắn hơn nhiều với thead (cho tiêu đề) / t feet (cho chân trang) / tbody (td cho bất kỳ số lượng cột nào) và chiều cao 100%. Nhưng điều này đã nhận thấy những bất lợi về ngữ nghĩa và SEO (t feet phải xuất hiện trước tbody. Vai trò ARIA có thể giúp các công cụ tìm kiếm phong nha mặc dù).

Nhiều người đã đưa ra câu trả lời cho vấn đề đơn giản này ở đây, nhưng tôi có một điều cần nói thêm, xem xét tôi đã thất vọng như thế nào cho đến khi tôi nhận ra mình đã làm gì sai.

Như đã đề cập, cách đơn giản nhất để làm điều này là như vậy ..

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

Tuy nhiên, thuộc tính không được đề cập trong bài viết, có lẽ vì nó thường được mặc định, là vị trí: tĩnh trên thẻ body. Vị trí tương đối sẽ không làm việc!

Chủ đề wordpress của tôi đã ghi đè lên màn hình cơ thể mặc định và nó làm tôi bối rối trong một thời gian dài đáng ghét.

Một chủ đề cũ mà tôi biết, nhưng nếu bạn đang tìm kiếm một giải pháp đáp ứng, phần bổ sung jQuery này sẽ giúp:

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

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

Hướng dẫn đầy đủ có thể được tìm thấy ở đây: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

Tôi đã tạo một thư viện rất đơn giản https://github.com/ravinderpayal/FooterJS

Nó rất đơn giản trong sử dụng. Sau khi bao gồm thư viện, chỉ cần gọi dòng mã này.

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

Chân trang có thể được thay đổi động bằng cách gọi lại hàm trên với tham số / id khác nhau.

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

Lưu ý: - Bạn chưa thay đổi hoặc thêm bất kỳ CSS nào. Thư viện là động, ngụ ý rằng ngay cả khi màn hình được thay đổi kích thước sau khi tải trang, nó sẽ đặt lại vị trí của chân trang. Tôi đã tạo thư viện này, vì CSS giải quyết vấn đề trong một thời gian nhưng khi kích thước màn hình thay đổi đáng kể, từ máy tính để bàn sang máy tính bảng hoặc ngược lại, chúng sẽ chồng lấp nội dung hoặc chúng không còn bị dính nữa.

Một giải pháp khác là CSS Media Queries, nhưng bạn phải viết thủ công các kiểu CSS khác nhau cho các kích thước màn hình khác nhau trong khi thư viện này tự động hoạt động và được hỗ trợ bởi tất cả các trình duyệt hỗ trợ JavaScript cơ bản.

Chỉnh sửa giải pháp 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;
    }
}

Bây giờ, nếu chiều cao của màn hình lớn hơn chiều dài nội dung của bạn, chúng tôi sẽ cố định chân trang xuống dưới cùng và nếu không, nó sẽ tự động xuất hiện ở cuối màn hình khi bạn cần cuộn để xem phần này.

Và, nó có vẻ là một giải pháp tốt hơn so với JavaScript / thư viện.

Tôi đã không gặp may mắn với các giải pháp được đề xuất trên trang này trước đó nhưng cuối cùng, mẹo nhỏ này đã có hiệu quả. Tôi sẽ đưa nó vào như một giải pháp khả thi khác.

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

Giải pháp Flexbox

Bố trí Flex được ưa thích cho chiều cao đầu trang và chân trang tự nhiên. Giải pháp flex này được thử nghiệm trong các trình duyệt hiện đại và thực sự hoạt động :) trong IE11.

Xem Fiddle Fiddle .

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

Đối với tôi cách hiển thị đẹp nhất (chân trang) là bám sát phía dưới nhưng không bao phủ nội dung mọi lúc:

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

jQuery CROSS BROWSER KHÁCH HÀNG PLUGIN - $ .footerBottom ()

Hoặc sử dụng jQuery như tôi và đặt chiều cao chân trang của bạn thành autohoặcfix , bất cứ điều gì bạn thích, dù sao nó cũng sẽ hoạt động. plugin này sử dụng các bộ chọn jQuery để làm cho nó hoạt động, bạn sẽ phải đưa thư viện jQuery vào tệp của mình.

Đây là cách bạn chạy plugin. Nhập jQuery, sao chép mã của plugin jQuery tùy chỉnh này và nhập nó sau khi nhập jQuery! Nó rất đơn giản và cơ bản, nhưng quan trọng.

Khi bạn làm điều đó, tất cả những gì bạn phải làm là chạy mã này:

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

không cần phải đặt nó bên trong sự kiện sẵn sàng tài liệu. Nó sẽ chạy tốt như nó là. Nó sẽ tính toán lại vị trí của chân trang của bạn khi trang được tải và khi cửa sổ được thay đổi kích thước.

Đây là mã của plugin mà bạn không cần phải hiểu. Chỉ cần biết làm thế nào để thực hiện nó. Nó làm công việc cho bạn. Tuy nhiên, nếu bạn muốn biết nó hoạt động như thế nào, chỉ cần xem qua mã. Tôi để lại ý kiến ​​cho bạn.

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

Các giải pháp flex đã làm việc cho tôi khi làm cho phần chân trang bị dính, nhưng không may thay đổi cơ thể để sử dụng bố cục flex đã khiến một số bố cục trang của chúng tôi thay đổi, và không tốt hơn. Điều cuối cùng làm việc cho tôi là:

    jQuery(document).ready(function() {

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

});

Tôi đã nhận được điều này từ phản hồi của ctf0 tại https://css-tricks.com/couple-takes-sticky-footer/

Nếu bạn không muốn nó sử dụng vị trí cố định và theo dõi bạn một cách khó chịu trên thiết bị di động, điều này dường như vẫn hoạt động với tôi cho đến nay.

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

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

Chỉ cần đặt html thành min-height: 100%;và position: relative;sau đó position: absolute; bottom: 0; left: 0;trên chân trang. Sau đó tôi chắc chắn rằng phần chân trang là yếu tố cuối cùng trong cơ thể.

Hãy cho tôi biết nếu điều này không làm việc cho bất cứ ai khác, và tại sao. Tôi biết những vụ hack phong cách tẻ nhạt này có thể hành xử kỳ lạ giữa những hoàn cảnh khác nhau mà tôi không nghĩ tới.

Hãy thử đặt div container (với overflow: auto) xung quanh nội dung và thanh bên.

Nếu điều đó không hoạt động, bạn có bất kỳ ảnh chụp màn hình hoặc liên kết ví dụ nào mà phần chân trang không được hiển thị đúng không?