Chân trang dính của Ryan Fait rất đẹp, tuy nhiên tôi thấy cấu trúc cơ bản của nó còn thiếu *.
Phiên bản Flexbox
Nếu bạn đủ may mắn để có thể sử dụng flexbox mà không cần hỗ trợ các trình duyệt cũ hơn, các chân trang dính trở nên dễ dàng một cách đáng kể và hỗ trợ chân trang có kích thước động.
Mẹo để làm cho chân trang dính vào phía dưới với flexbox là để các phần tử khác trong cùng một container uốn cong theo chiều dọc. Tất cả những gì cần là một phần tử bao bọc có chiều cao đầy đủ với display: flexvà ít nhất một anh chị em có flexgiá trị lớn hơn 0:
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
article {
flex: 1;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
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: 100%;
}
article {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
Nếu bạn không thể sử dụng flexbox, cấu trúc cơ bản mà tôi lựa chọn là:
<div class="page">
<div class="page__inner">
<header class="header">
<div class="header__inner">
</div>
</header>
<nav class="nav">
<div class="nav__inner">
</div>
</nav>
<main class="wrapper">
<div class="wrapper__inner">
<div class="content">
<div class="content__inner">
</div>
</div>
<div class="sidebar">
<div class="sidebar__inner">
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__inner">
</div>
</footer>
</div>
</div>
Đó không phải là tất cả xa so với:
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
Mẹo để giữ chân trang là giữ cho chân trang được neo vào phần đệm dưới cùng của phần tử chứa nó. Điều này yêu cầu chiều cao của chân trang là tĩnh, nhưng tôi nhận thấy rằng chân trang thường có chiều cao tĩnh.
HTML:
<div id="main-wrapper">
...
<footer>
</footer>
</div>
CSS:
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
Với chân trang được neo vào #main-wrapper, bây giờ bạn cần #main-wrapperphải có chiều cao ít nhất của trang, trừ khi phần con của nó dài hơn. Này được thực hiện bằng cách làm cho #main-wrappercó một min-heightsố 100%. Bạn cũng phải nhớ rằng cha mẹ của nó, htmlvà bodycần phải cao như trang.
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
Tất nhiên, bạn nên đặt câu hỏi về nhận định của tôi, vì đoạn mã này buộc phần chân trang nằm ở cuối trang, ngay cả khi không có nội dung. Bí quyết cuối cùng là thay đổi mô hình hộp được sử dụng bởi các #main-wrappersao cho min-heightcủa 100%bao gồm 100pxpadding.
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
Và bạn đã có nó, một footer dính với cấu trúc HTML ban đầu của bạn. Chỉ cần đảm bảo rằng footer's heightbằng với #main-wrapper' padding-bottomvà bạn sẽ được đặt.
* Lý do tôi thấy lỗi với cấu trúc của Fait là vì nó đặt các phần tử .footervà .headerở các mức phân cấp khác nhau trong khi thêm một .pushphần tử không cần thiết .