Ở bài viết này, tôi sẽ hướng dẫn bạn cách làm cho FOOTER nằm dưới đáy trang web trong trường hợp nội dung trang web thấp hơn chiều cao của thiết bị.

Có vẻ như tính năng này ít được mọi người sử dụng. Vì hầu hết các trang web đã có nội dung hoàn chỉnh và lấp đầy màn hình.

Tuy nhiên, hãy thử truy cập vào trang 404 trên web của bạn. Vì thường trang 404 sẽ có ít nội dung nhất, điều này cũng đồng nghĩa nó có khả năng sẽ không lấp đầy chiều cao của màn hình thiết bị.

Nhìn nó không được thẩm mỹ đúng không?

Phương pháp tôi sử dụng để làm đầy <body> là sử dụng css flex row kết hợp với min-height: 100vh

Đây là cấu trúc HTML cần có:

<body>
  <header>HEADER</header>
  <main>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
  </main>
  <footer>FOOTER</footer>
</body>

Mã CSS. thẻ <main> được đặt thành flex: 1

body{
  margin: unset;
  padding: unset;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header{
  background-color: #303030;
  color: #fff;
  height: 50px;
  text-align: center;
}
footer{
  background-color: black;
  color: #fff;
  height: 50px;
  text-align: center;
}
main{
  background-color: #aaa;
  flex: 1;
}

Xem ví dụ cụ thể codepen bên dưới.

See the Pen FOOTER is at the bottom by ARTRU (@artrublog) on CodePen.

Kết quả của tôi sau khi sử dụng: