Không nên nhầm lẫn chân trang cố định với chân trang cố định - chân trang dính là một mẫu mà chân trang luôn dính vào cuối màn hình (trong trường hợp nội dung không lấp đầy trang) hoặc dính vào cuối nội dung trang web . Chân trang cố định chỉ nằm ở cuối màn hình khi người dùng cuộn trang. Các ví dụ về trình chỉnh sửa mã này phân biệt sự khác biệt:
Chân trang cố định:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sticky Footer</title>
</head>
<style>
body {
width: 100%;
margin: 0 auto;
text-align: center;
}
header {
background: orange;
height: 100px;
display: inline-block;
width: 100%;
}
p {
text-align: left;
width: 80%;
margin: 0 auto;
line-height: 5rem;
font-size: 2rem;
text-indent: 5rem;
}
footer {
background: black;
color: white;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
<body>
<header>
<h1>This is a header</h1>
</header>
<div>
<h2>This is the website content.</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Aspernatur cum aliquid nostrum dolore sunt ex exercitationem,
enim provident quia laudantium, blanditiis repellendus similique
in possimus, nisi voluptatem? Quibusdam, suscipit impedit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
veritatis doloremque recusandae similique mollitia quod impedit,
rerum inventore beatae quia vel aperiam maiores corrupti tenetur
illo praesentium repudiandae a distinctio?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta
saepe, reiciendis in maxime perspiciatis cum similique a quis
accusamus blanditiis harum voluptates at doloribus autem numquam
sint? Qui, tempora ratione!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde,
deserunt placeat? Laborum voluptates minus, adipisci odit
repellat corrupti libero! Asperiores delectus quasi debitis
mollitia eum et vel recusandae quas esse.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Molestias ad dolorem rerum suscipit eos eius libero animi omnis,
ea esse distinctio doloremque corporis, a quidem inventore sequi
nostrum aut impedit.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Suscipit quod ipsum maiores, minus non atque asperiores corrupti
placeat nulla temporibus est libero numquam ad culpa architecto
reprehenderit nemo doloribus ipsa?
</p>
</div>
<footer>
<h5>This is a fixed footer.</h5>
</footer>
</body>
</html> Chân trang cố định:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sticky Footer</title>
</head>
<style>
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.page-header, .page-footer {
flex-shrink: 0;
}
h1, h2, h3, h4, h5 {
text-align: center;
}
.orange {
background: orange;
}
.page-body {
background: blue;
flex-grow: 1;
}
.page-body p {
text-align: left;
width: 80%;
margin: 0 auto;
line-height: 4rem;
font-size: 1.8rem;
text-indent: 4rem;
}
.black {
background: black;
color: white;
}
</style>
<body>
<div class="container">
<header class="page-header orange">
<h1>This is a header</h1>
</header>
<div class="page-body">
<h2>This is the website content.</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
</div>
<footer class="page-footer black">
<h5>This is a sticky footer.</h5>
</footer>
</div>
</body>
</html> Kết luận
Chân trang cố định sử dụng vị trí để giữ nó ở cuối màn hình. Thứ hai sử dụng các thuộc tính uốn cong và phát triển linh hoạt của flexbox để giữ chân trang ở cuối nội dung. Hãy chú ý đến sự khác biệt trong các đặc điểm của footer trong mỗi ví dụ mã.
Chơi trong môi trường hộp cát ở trên sẽ giúp bạn hiểu các mô hình này. Hãy thử thay đổi mọi thứ và thử nghiệm với các giá trị khác nhau.