379

Tôi đã có trang sau (deadlink http://www.workingstorage.com/Sample.htm:) có chân trang mà tôi không thể ngồi ở cuối trang.

Tôi muốn chân trang

dính vào đáy cửa sổ khi trang ngắn và màn hình không được lấp đầy, và
ở cuối tài liệu và di chuyển xuống như bình thường khi có nhiều hơn một màn hình nội dung (thay vì chồng chéo nội dung).

CSS được kế thừa và làm tôi bối rối; Tôi dường như không thể thay đổi nó một cách hợp lý để đặt chiều cao tối thiểu cho nội dung hoặc làm cho phần chân trang đi xuống dưới cùng.

css footer

— Caveatrob
nguồn

16

Thật đáng ngạc nhiên khi đây là một vấn đề phổ biến. Có thể trong CSS4, chúng ta sẽ thấy các triển khai "tạo thanh điều hướng" và "tạo chân trang" vì chúng thường được thử.

— đẳng cấu

1

Sẽ không bao giờ có CSS4 (CSS3 sẽ chỉ phát triển). Tôi nghĩ rằng điều này sẽ được khắc phục với việc thực hiện flexbox.

— Marijke Luttekes

1

Bài viết tuyệt vời về điều này: css-tricks.com/couple-takes-sticky-footer

— Phil

Expertuggestion.com/css-snippets/8

— Lalit Baghel

345

Một phương pháp đơn giản là làm cho cơ thể 100%của trang web, với một min-heightsố 100%quá. Điều này hoạt động tốt nếu chiều cao của footer của bạn không thay đổi.

Cung cấp cho chân trang một đỉnh âm:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

— Jon Winstanley
nguồn

27

Điều này chỉ hoạt động nếu bạn biết chiều cao của footer của bạn trước thời hạn. Đôi khi chân trang có nội dung động hoặc xây dựng khung của bạn. Bất kỳ ý tưởng cho chân chiều cao thay đổi?

— Costa

@Costa kiểm tra câu trả lời của tôi ở đây , để biết giải pháp hoạt động với chân trang có chiều cao thay đổi.

— Jose Rui Santos

đối với nội dung động, chỉ cần bỏ qua "chiều cao" và chân trang sẽ thích ứng với nội dung. Chưa được thử nghiệm trong tất cả trình duyệt

— m47730

Điều này có thể yêu cầu box-sizing: border-box;cơ thể [và #container].

— konsolebox

Điều này có vẻ như rất nhiều thủ thuật kỳ lạ, có những câu trả lời dưới đây rất đơn giản và không sử dụng thủ thuật nào.

— Andrew Koster

165

Tôi đã phát triển một phương pháp khá dễ dàng để dán Footer ở phía dưới, nhưng như hầu hết các phương pháp phổ biến, bạn sẽ cần điều chỉnh nó để phù hợp với chiều cao của Footer.

XEM DEMO

Phương pháp Flexbox:

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

Mở rộng đoạn trích

Phương pháp dưới đây sử dụng một "mẹo" bằng cách đặt một ::after phần tử giả trên bodyvà đặt nó có chiều cao chính xác của chân trang, do đó, nó sẽ chiếm không gian chính xác giống như chân trang, do đó, khi phần chân trang được absoluteđặt trên nó, có vẻ như phần chân trang thực sự chiếm không gian và loại bỏ các ảnh hưởng tiêu cực của vị trí tuyệt đối của nó (ví dụ: đi qua nội dung của cơ thể)

`position:absolute` phương thức: (không cho phép chiều cao chân trang động)

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

Mở rộng đoạn trích

Phương pháp bố trí bảng:

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

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

Mở rộng đoạn trích

— vsync
nguồn

Đơn giản và thanh lịch và quan trọng hơn là nó hoạt động. Các giải pháp khác không thành công khi bạn bắt đầu thêm div với display: table display: table-row display:table-cell. Tuy nhiên tôi thấy tôi cần phải thêm body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}để tránh một thanh cuộn. Bạn có thể phục vụ cho điều này bằng cách điều chỉnh body:after heightnhưng tôi chỉ định của tôi trong rem không px để nó trở thành vấn đề.

— Steve Waring

3

@SteveWared - Cảm ơn bạn. Cập nhật câu trả lời này vì nó khá cũ. Bây giờ tôi ủng hộ việc sử dụngflexbox

— vsync

1

CSS trong "đánh dấu chung cơ bản" có một lỗi nhỏ khiến nó không hoạt động (lỗi không có trong "DEMO" được liên kết, không sao cả). Tôi đã tự do sửa chữa nó.

— sleske

3

CẢM ƠN BẠN! Giải pháp flexbox thực sự đơn giản và không sử dụng hack hay kích thước cố định kỳ lạ hoặc vị trí cố định.

— Andrew Koster

1

Bản demo này là bản duy nhất hoạt động! Tuyệt vời, cảm ơn bạn!

— Drakinite

51

Một cách tiếp cận rất đơn giản mà hoạt động tốt trên trình duyệt chéo là:

http://matthewjamestaylor.com/blog/keep- feeters-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>

Mở rộng đoạn trích

— Tamás Pap
nguồn

34

Tôi đã sử dụng cái này để dán chân trang của tôi xuống phía dưới và nó hoạt động với tôi:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

Đó là sửa đổi duy nhất bạn phải thực hiện trong HTML, thêm nó divvào "allButFooter"lớp. Tôi đã làm điều đó với tất cả các trang, những trang quá ngắn, tôi biết phần chân trang sẽ không dính vào đáy và cũng là những trang đủ dài mà tôi đã biết mình phải cuộn. Tôi đã làm điều này, vì vậy tôi có thể thấy rằng nó hoạt động tốt trong trường hợp nội dung của trang là động.

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

Các "allButFooter"lớp học có một min-heightgiá trị mà phụ thuộc vào chiều cao của khung nhìn ( 100vhcó nghĩa là 100% chiều cao khung nhìn) và chiều cao của chân, mà tôi đã biết được 40px.

Đó là tất cả những gì tôi đã làm, và nó hoạt động hoàn hảo với tôi. Tôi đã không thử nó trên mọi trình duyệt, chỉ có Firefox, Chrome và Edge và kết quả như tôi muốn. Chân trang dính vào đáy và bạn không phải lộn xộn với chỉ số z, vị trí hoặc bất kỳ thuộc tính nào khác. Vị trí của mọi yếu tố trong tài liệu của tôi là vị trí mặc định, tôi đã không thay đổi nó thành tuyệt đối hoặc cố định hoặc bất cứ điều gì.

Làm việc với thiết kế đáp ứng

Đây là một cái gì đó tôi muốn làm rõ. Giải pháp này, với cùng Footer cao 40px không hoạt động như tôi mong đợi khi tôi làm việc trong một thiết kế đáp ứng bằng cách sử dụng Twitter-Bootstrap. Tôi đã phải sửa đổi giá trị mà tôi đã trừ trong hàm:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

Điều này có lẽ là do Twitter-Bootstrapđi kèm với lề và phần đệm riêng của nó, vì vậy đó là lý do tại sao tôi phải điều chỉnh giá trị đó.

Tôi hy vọng đây là một số sử dụng cho các bạn! Ít nhất, đó là một giải pháp đơn giản để thử, và nó không liên quan đến việc tạo ra những thay đổi lớn cho toàn bộ tài liệu.

— N. Larrieux
nguồn

Tôi đã gặp vấn đề với tất cả các loại giải pháp cho vấn đề này. Giải pháp này hoạt động với trang của tôi thay đổi nội dung được hiển thị trong phần thân bằng cách sử dụng display: noneCảm ơn. Nó cũng đẹp và đơn giản.

— Steve Waring

Sau nhiều giờ cố gắng giải pháp chỉ có hai nl làm việc. position: fixed; bottom: 0và cái này nữa. Giải pháp này là tốt nhất vì chân trang không dính vào đáy, nhưng vẫn ở cuối trang có thể cuộn.

— Hmerman6006

để xây dựng dựa trên câu trả lời của bạn, bạn có thể xem xét nó theo cách khác bằng cách đặt .footer {max-height: calc(100vh+40px); position: absolute}. Vì nó cũng hoạt động, bạn chỉ nên biết kích thước cơ thể của bạn.

— Hmerman6006

29

Từ IE7 trở đi bạn chỉ cần sử dụng

#footer {
    position:fixed;
    bottom:0;
}

Xem caniuse để được hỗ trợ.

— Liam
nguồn

77

Tôi không muốn phần chân trang ở phía dưới khi có nội dung nằm ngoài phần chân trang. Tôi muốn chân trang bám sát vào đáy khi không đủ, và sau đó mở rộng xuống dưới như bình thường khi có nhiều hơn một màn hình. Các footer dính đã giải quyết điều này.

— Caveatrob

@Caveatrob: Tôi đã tự do chỉnh sửa thông tin quan trọng này vào câu hỏi của bạn, chỉ để tránh những hiểu lầm (đối với độc giả trong tương lai, có lẽ bạn đã giải quyết vấn đề này trong thời gian này :-)).

— sleske

Giải pháp này là duy nhất in chân trang đến mỗi trang và nó rất đơn giản! Nhưng tôi không thể làm cho nó hoạt động mà nội dung không trùng lặp với nội dung chính. Bất cứ ai cũng có một giải pháp cho điều này?

— Hatzen

15

Một giải pháp đơn giản mà tôi sử dụng, hoạt động từ IE8 +

Cung cấp chiều cao tối thiểu: 100% trên html để nếu nội dung ít hơn thì trang tĩnh sẽ có toàn bộ chiều cao cổng xem và chân trang ở cuối trang. Khi nội dung tăng, chân trang sẽ dịch chuyển xuống với nội dung và tiếp tục bám sát vào đáy.

Bản demo làm việc của JS fiddle: http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

— Sanjeev
nguồn

nó tốt..nhưng chỉ cần cập nhật .pageContentWrapper {padding-bottom: 100px; / * Chiều cao của chân trang * /}

— Subodh Sharma

Cảm ơn rất nhiều. làm việc trên Angular 7

— Carlos Torres

Tôi không muốn tạo một thanh cuộn không cần thiết khi có thể.

— Toàn cảnh

14

Tuy nhiên, một giải pháp thực sự đơn giản khác là giải pháp này:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

Bí quyết là sử dụng một display:tablecho toàn bộ tài liệu và display:table-rowvới height:0chân trang.

Vì chân trang là con cơ thể duy nhất có màn hình hiển thị table-row, nên nó được hiển thị ở cuối trang.

— Jose Rui Santos
nguồn

Tôi yêu các bảng css, nhưng chúng tạo ra vấn đề khá lạ: stackoverflow.com/questions/24898115/ mẹo

— Costa

1

Giải pháp này dường như không hoàn toàn hoạt động - Firefox bỏ qua chiều cao chân trang 0. Tôi đã sử dụng chiều cao 1px hoặc thậm chí 1% thay thế. Edge, IE11, Chrome và safari di động hài lòng với 0.

— Kitet

Tôi thực sự thích giải pháp này. Nhưng khi tôi xây dựng bố cục của mình như thế này, tính toán trình duyệt của các phần tử con bị suy giảm. Giả sử chúng ta muốn có một thùng chứa ở đầu trang và nó phải height: 100%thực sự là 100% khi tỷ lệ khung nhìn là 1/1 (vuông). Khi chế độ xem được mở rộng hơn (chiều ngang) chiều cao sẽ cao hơn 100% và nếu hẹp hơn (dọc) thì 100%. Vì vậy, chiều cao tỷ lệ thuận với chiều rộng của cửa sổ. Đã cố gắng giải quyết nó bằng một trình bao bọc khác nhưng điều này không hiệu quả. Ai đó có một giải pháp hoặc ít nhất là một gợi ý ???

— Axel

@Axel Trong phiên bản này, tôi đã thêm một div màu xanh lam trên đầu với 100% chiều cao chiếm toàn bộ chiều cao (trừ chiều cao chân trang), bất kể chiều rộng khung nhìn. Tôi nghĩ rằng bạn có thể có những thứ gây rối CSS khác. Cố gắng tạo một phiên bản thu nhỏ của vấn đề của bạn dựa trên jsFiddle ban đầu của tôi

— Jose Rui Santos

@JoseRuiSantos Cảm ơn bạn rất nhiều vì đã phản hồi. Nó có vẻ là một lỗi FireFox. Xem ảnh chụp màn hình

— Axel

8

Một giải pháp flex rất đơn giản không giả định độ cao cố định hoặc thay đổi vị trí của các phần tử.

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

Hỗ trợ trình duyệt

Tất cả các trình duyệt chính, ngoại trừ IE11 trở xuống.

Đảm bảo sử dụng Autoprefixer cho các tiền tố thích hợp.

Hiển thị đoạn mã

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/////////////////////////////////////////////

body,
html {
    margin: 0;
    padding: 0;
}

header,
main,
footer {
  margin: 0;
  display: block;
}

header,
footer {
  min-height: 80px; 
}

header {
  background-color: #ccc;
}

main {
  background-color: #f4f4f4;
}

footer {
  background-color: orange;
}

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

Mở rộng đoạn trích

— m.spyratos
nguồn

làm việc như người ở! ngay cả đối với độ phân giải hơn 4k footer ở phía dưới

— Arpan Banerjee

7

Một điều cần cảnh giác là các thiết bị di động, vì chúng thực hiện ý tưởng về chế độ xem theo cách 'bất thường':

http://developer.apple.com/lvern/ios/#documentation/AppleAppluggest/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_Vf/doc/uid/TP40006509-S25

Như vậy, sử dụng position: fixed; (như tôi đã thấy được đề xuất ở những nơi khác) thường không phải là cách để đi. Tất nhiên, nó phụ thuộc vào hành vi chính xác mà bạn theo đuổi.

Những gì tôi đã sử dụng và đã hoạt động tốt trên máy tính để bàn và thiết bị di động là:

<body>
    <div id="footer"></div>
</body>

với

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}

— Ben Jackson
nguồn

6

Làm cái này

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

Bạn cũng có thể đọc về flex nó được hỗ trợ bởi tất cả các trình duyệt hiện đại

Cập nhật : Tôi đọc về flex và đã thử nó. Nó làm việc cho tôi. Hy vọng nó làm điều tương tự cho bạn. Đây là cách tôi triển khai. Đây không phải là ID mà là div

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

main {
    display: block;
    flex: 1 0 auto;
}

Tại đây bạn có thể đọc thêm về flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hãy nhớ rằng nó không được hỗ trợ bởi các phiên bản IE cũ hơn.

— Aarth Tandel
nguồn

1

Đây là câu trả lời tốt nhất trong thực tế. Sử dụng flex-grow: 1cho một cái gì đó phía trên chân trang sẽ giữ chân trang ở phía dưới đúng cách.

— iBug

5

Tôi chỉ trả lời như câu hỏi tương tự ở đây:

Chân trang ở cuối trang có tiêu đề cố định

Tôi khá mới trong phát triển web và tôi biết điều này đã được trả lời, nhưng đây là cách dễ nhất tôi tìm thấy để giải quyết nó và tôi nghĩ có một số khác biệt. Tôi muốn một cái gì đó linh hoạt bởi vì phần chân trang của ứng dụng web của tôi có chiều cao động, cuối cùng tôi đã sử dụng FlexBox và một miếng đệm.

Bắt đầu bằng cách đặt chiều cao cho html và cơ thể của bạn

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

Tôi đang giả sử một columnhành vi cho ứng dụng của chúng tôi, trong trường hợp bạn cần thêm tiêu đề, anh hùng hoặc bất kỳ nội dung nào được căn chỉnh theo chiều dọc.

Tạo lớp đệm

.spacer {
    flex: 1; 
}

Vì vậy, sau này trên HTML của bạn có thể là một cái gì đó như

<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

Bạn có thể chơi với nó tại đây https://codepen.io/anon/pen/xmGZQL

— Camo
nguồn

5

Điều này được gọi là một footer dính. Một tìm kiếm google cho nó đi kèm với rất nhiều kết quả. CSS Foot Footer là cái tôi đã sử dụng thành công. Nhưng có nhiều hơn nữa.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Mở rộng đoạn trích

Nguồn cho mã này

— Paolo Bergantino
nguồn

3

Phương pháp jquery của tôi, phương pháp này đặt chân trang ở cuối trang nếu nội dung trang nhỏ hơn chiều cao cửa sổ hoặc chỉ đặt chân trang sau nội dung khác:

Ngoài ra, giữ mã trong bao vây riêng trước mã khác sẽ giảm thời gian cần thiết để định vị lại chân trang.

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

— Sam Jones
nguồn

3

Tôi đã tự mình xem xét vấn đề này. Tôi đã thấy khá nhiều giải pháp và mỗi giải pháp đều có vấn đề, thường liên quan đến một số con số ma thuật.

Vì vậy, bằng cách sử dụng các thực tiễn tốt nhất từ nhiều nguồn khác nhau, tôi đã đưa ra giải pháp này:

http://jsfiddle.net/vfSM3/248/

Điều tôi muốn đạt được cụ thể ở đây là lấy nội dung chính để cuộn giữa chân trang và tiêu đề bên trong khu vực màu xanh lá cây.

đây là một css đơn giản:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}

— trấu
nguồn

3

Tôi ghét các trang web được thiết kế như thế này. Tại sao bạn muốn hạn chế số lượng văn bản tôi có thể đọc cùng một lúc? Tôi không cần phải xem tiêu đề và chân trang mọi lúc, tôi biết nơi tìm chúng khi tôi muốn.

— Tarmil

1

@Tarmil có một cái nhìn tại numerics.info . Bạn có thấy bây giờ khi điều này có thể hữu ích?

— husayt

3

Đây là cách tôi giải quyết vấn đề tương tự

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

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

<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

Mở rộng đoạn trích

— Nemus
nguồn

3

footer {
  margin-top:calc(5% + 60px);
}

Cái này hoạt động tốt

— Karthikaeyan
nguồn

2

Chỉ cần tùy chỉnh phần chân trang

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}

 <div class="footer">
   Footer is always bootom
 </div>

— phát ban
nguồn

Không làm việc. Nó luôn luôn dính vào đáy ngay cả khi chúng ta có trang rất lớn. Nó không thể cuộn với tất cả các trang mà chỉ dính vào dưới cùng.

— fWd82

Không hoạt động. Footer đang đến đầu nội dung.

— không chuyên nghiệp

1

đây là hai xu của tôi So sánh với các giải pháp khác, người ta không cần thêm các thùng chứa bổ sung. Do đó, giải pháp này là một chút thanh lịch. Bên dưới ví dụ mã tôi sẽ giải thích lý do tại sao điều này hoạt động.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

Vì vậy, điều đầu tiên chúng tôi làm là tạo ra thùng chứa lớn nhất (html) 100%. Trang html lớn như chính trang đó. Tiếp theo, chúng tôi đặt chiều cao cơ thể, nó có thể lớn hơn 100% của thẻ html, nhưng ít nhất nó phải lớn như vậy, do đó chúng tôi sử dụng chiều cao tối thiểu 100%.

Chúng tôi cũng làm cho cơ thể tương đối. Tương đối có nghĩa là bạn có thể di chuyển phần tử khối xung quanh vị trí ban đầu từ vị trí ban đầu của nó. Chúng tôi không sử dụng ở đây mặc dù. Vì người thân có cách sử dụng thứ hai. Bất kỳ phần tử tuyệt đối nào là tuyệt đối với gốc (html) hoặc với cha mẹ / ông bà tương đối đầu tiên. Đó là những gì chúng tôi muốn, chúng tôi muốn chân trang là tuyệt đối, liên quan đến cơ thể, cụ thể là phía dưới.

Bước cuối cùng là đặt chân trang thành tuyệt đối và dưới cùng: 0, di chuyển nó xuống dưới cùng của cha mẹ / ông bà đầu tiên tương đối (cơ thể).

Bây giờ chúng tôi vẫn còn một vấn đề cần khắc phục, khi chúng tôi điền vào trang hoàn chỉnh, nội dung sẽ nằm bên dưới chân trang. Tại sao? tốt, bởi vì phần chân trang không còn nằm trong "luồng html" nữa, vì nó là tuyệt đối. Vì vậy, làm thế nào để chúng tôi sửa lỗi này? Chúng tôi sẽ thêm phần đệm dưới cùng vào cơ thể. Điều này đảm bảo cơ thể thực sự lớn hơn nội dung của nó.

Tôi hy vọng tôi đã làm rõ ràng cho các bạn.

— David
nguồn

1

Động một lớp lót bằng jQuery

Tất cả các phương pháp CSS tôi đã đi qua là quá cứng nhắc. Ngoài ra, đặt chân trang thành fixedkhông phải là một tùy chọn nếu đó không phải là một phần của thiết kế.

Đã thử nghiệm trên:

Chrome: 60
FF: 54
IE: 11

Giả sử bố cục này:

<html>

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

</html>

Sử dụng hàm jQuery sau:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

Có gì mà không được thiết lập min-heightcho #contentđến chiều cao cửa sổ - chiều cao của chân gì bao giờ có thể có vào thời điểm đó.

Vì chúng tôi đã sử dụng min-height, nếu #contentchiều cao vượt quá chiều cao cửa sổ , chức năng sẽ xuống cấp một cách duyên dáng và không ảnh hưởng gì vì không cần thiết.

Xem nó trong hành động:

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}

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

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

Mở rộng đoạn trích

Cùng một đoạn trên JsFiddle

Tặng kem:

Chúng ta có thể thực hiện điều này hơn nữa và làm cho chức năng này thích ứng với thay đổi kích thước chiều cao của người xem như sau:

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}

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

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

Mở rộng đoạn trích

— Tôi haz kode
nguồn

1

Bạn có thể làm được việc này

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

— Abdallah Abdillah
nguồn

0

Chỉ cần đặt html, thân và các hàng khác ngoại trừ chân trang thành 100%. ví dụ

<body>
<header></header>
<content></content>
<footer></footer>

css trở thành

html, body, header, content{
height:100%;
}

— Olatunde G.
nguồn

0

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


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

— San Jaisy
nguồn

0

Thế còn

<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>

— tiểu thuyết
nguồn

Mặc dù mã này có thể trả lời câu hỏi, cung cấp ngữ cảnh bổ sung về lý do và / hoặc cách mã này trả lời câu hỏi cải thiện giá trị lâu dài của nó.

— β.εηοιτ.βε

-1

Tôi đã sử dụng trong nhiều dự án của mình và không bao giờ có bất kỳ vấn đề nào :)

để bạn tham khảo, Code nằm trong đoạn trích

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>

Mở rộng đoạn trích

— Santosh Khalse
nguồn

CSS để làm chân trang của trang HTML ở dưới cùng của trang với chiều cao tối thiểu, nhưng không chồng lấp trang

XEM DEMO

Phương pháp Flexbox:

position:absolute phương thức: (không cho phép chiều cao chân trang động)

Phương pháp bố trí bảng:

Css

Html

Động một lớp lót bằng jQuery

Tặng kem:

`position:absolute` phương thức: (không cho phép chiều cao chân trang động)