Tôi có một trang chỉ có một vài dòng nội dung. Tôi muốn chân phải được đẩy xuống đáy.chân trang ở dưới cùng trên các trang có ít nội dung
<div id="footer"></div>
Tôi không muốn sử dụng
#footer
{
position:fixed;
bottom:0;
}
AKA Chú ý Footer
Đây có phải là có thể mà không jQuery?
bất kỳ đề xuất nào?
Có một số khác Sticky Footer không sử dụng vị trí cố định;
* {
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 -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Đây là một CSS tinh khiết tuyệt vời dung dịch. Chân trang nằm bên dưới nội dung nếu chiều cao nội dung lớn hơn cửa sổ trình duyệt nhưng vẫn ở cuối cửa sổ trình duyệt nếu có ít nội dung hơn. – Deborah
Theo tôi, đó là giải pháp chân trang dính tốt nhất ... –
hoàn hảo! Tôi đoán điều này sẽ không hoạt động trên IE8 vì nó đang sử dụng margin âm. – pom4ik
Hãy thử Chú ý Footer Solution bởi Steve Hatcher
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {
margin: 0;
padding: 0;
}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to the total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 180px;
}
/* must be same height as the footer */
#footer {
position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear: both;
}
/*Opera Fix*/
body:before {
/* thanks to Maleika (Kohoutec)*/
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/
Liên kết bị hỏng. –
Tránh liên kết đó. Tôi đã đưa vào bản chỉnh sửa để xem xét. Tính đến tháng 11/2017 nó đã được chuyển hướng đến những trang lừa đảo tuyên bố rằng máy tính của bạn có vi-rút, v.v. –
Đây là một giải pháp mà không đòi hỏi rằng các chân được đặt bên ngoài của phần tử wrapper chính, đó là cách hầu hết mọi người cấu trúc trang của họ.
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
box-sizing: border-box;
position: relative;
padding-bottom: 1em; /* Height of footer */
min-height: 100%;
}
header {
background-color: #cff;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
background-color: #000;
}<div class="wrapper">
<header>I am the header.</header>
<article>I am content that doesn't fill the page. The footer will appear at the bottom of the browser window. However, when I do fill the page, you will need to scroll down to see the footer.</article>
<footer>I am the footer.</footer>
</div>Giải thích
Yếu tố wrapper sẽ lấp đầy 100% chiều cao khung nhìn. (Bạn cũng có thể sử dụng 100vh cho trình bao bọc nếu bạn không muốn đặt chiều cao của phần tử html và phần thân.) Trình bao bọc cũng có phần đệm bên dưới để tạo trình giữ chỗ cho chân trang để ngồi.
Chân trang được đặt hoàn toàn ở cuối trình bao bọc và nằm trong trình giữ chỗ được tạo bởi phần đệm đáy của trình bao bọc.
Điều này có nghĩa là khi trang không có thanh cuộn, chân trang sẽ được đặt ở dưới cùng. Tuy nhiên, khi có đủ nội dung cho thanh cuộn xuất hiện, chân trang sẽ được đẩy xuống dưới nội dung.
Xem câu trả lời của tôi tại đây: https://stackoverflow.com/questions/15960290/css-footer-not-displaying-at-the-bottom-of-the-page/48286159#48286159 – CodyBugstein