Cố định thanh điều hướng ở cuối trang web với CSS

Để đặt thanh điều hướng ở dưới cùng, hãy sử dụng position: fixed kết hợp với thuộc tính bottom.

Ví dụ

Bạn có thể chạy mã sau để triển khai menu cố định ở dưới cùng:

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        position: fixed;
        bottom: 0;
        width: 100%;
      }
      li {
        float: left;
        border-right: 1px solid white;
      }
      li a {
        display: block;
        padding: 8px;
        background-color: orange;
      }
      li:last-child {
        border-right: none;
      }
      div {
        padding: 10px;
        margin-top: 10px;
        background-color: white;
        height: 1000px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#home">Trang chủ</a></li>
      <li><a href="#news">Tin tức</a></li>
      <li><a href="#contact">Liên hệ</a></li>
      <li><a href="#about">Giới thiệu</a></li>
    </ul>
    <div>
      <p>Thêm văn bản demo để kiểm tra menu cố định.</p>
      <p>Thêm văn bản demo để kiểm tra menu cố định.</p>
      <p>Thêm văn bản demo để kiểm tra menu cố định.</p>
      <p>Thêm văn bản demo để kiểm tra menu cố định.</p>
      <p>Thêm văn bản demo để kiểm tra menu cố định.</p>
      <p>Thêm văn bản demo để kiểm tra menu cố định.</p>
      <p>Thêm văn bản demo để kiểm tra menu cố định.</p>
      <p>Thêm văn bản demo để kiểm tra menu cố định.</p>
      <p>Thêm văn bản demo để kiểm tra menu cố định.</p>
      <p>Thêm văn bản demo để kiểm tra menu cố định.</p>
      <p>Thêm văn bản demo để kiểm tra menu cố định.</p>
      <p>Thêm văn bản demo để kiểm tra menu cố định.</p>
    </div>
  </body>
</html>