如何在HTML中使頁尾固定在網頁底部？

頁尾顧名思義，始終固定在網頁底部。例如，在以下頁面中，我們有一個固定在底部的頁尾，即即使頁面向上滾動，頁尾仍然存在：

要建立一個固定在底部且固定的頁尾，我們將使用CSS。

使用position屬性設定頁尾停留在網頁底部

使用position CSS屬性設定頁尾停留在網頁底部。頁尾的高度、背景顏色和文字顏色設定為：

height: 40px;
background: black;
color: white;

示例

讓我們看看完整的示例：

<html>
<head>
   <style>
      #footer {
         position: fixed;
         padding: 10px 10px 0px 10px;
         bottom: 0;
         width: 100%;
         height: 40px;
         background: black;
         color: white;
      }
   </style>
<head>
<body>
   <center>
      <div id="container">
         <h2>Demo Heading</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ipsum mi, pretium
            finibus varius in, efficitur sit amet purus. Nam neque felis, efficitur vel eleifend at, posuere sed
            lectus. Donec laoreet tristique tortor eget varius. Vestibulum rutrum lectus dolor, id rhoncus
            mauris tempor vitae. Vivamus elementum dapibus ultrices. Maecenas facilisis sem nec quam
            fringilla, eu venenatis leo vehicula.</p>
         <p>Donec maximus urna nunc, vel scelerisque arcu tincidunt ultricies. Vestibulum
            tristique fermentum eros, a suscipit massa euismod quis. Praesent magna libero, feugiat quis
            magna at, bibendum faucibus mauris. Fusce at hendrerit nunc, non iaculis nisl. Integer facilisis
            tempor nibh eu faucibus. Ut cursus hendrerit justo, sit amet eleifend enim accumsan et. Ut
         lobortis massa quis leo dapibus cursus.</p>
         <p>Suspendisse efficitur condimentum dolor. Quisque sit amet dictum urna. Aliquam
            est nunc, ornare et vestibulum quis, volutpat a magna. Proin consequat lectus a tellus finibus, quis
            venenatis felis varius. Sed maximus, dui a accumsan imperdiet, nibh mauris facilisis metus, sed
            iaculis leo tellus nec augue. Maecenas ornare feugiat nunc fermentum porttitor. Sed fermentum
            eros at lorem venenatis, sed tempus sem varius. Maecenas lobortis enim sed pretium ultricies.
            Aliquam et dui suscipit, suscipit tortor id, consectetur odio. Vestibulum vel eros quis ante
            scelerisque suscipit imperdiet a dolor. Vivamus faucibus vitae lacus id interdum. Vivamus blandit,
            odio sed scelerisque gravida, nibh eros malesuada nunc, non lacinia elit risus non augue. Ut luctus
            tempor aliquam.</p>
         <div id="footer">Footer</div>
      </div>
   </center>
</body>
<html>

使用display屬性設定頁尾停留在網頁底部

在這個例子中，我們將使用display屬性設定頁尾停留在網頁底部。設定頁尾的樣式：

display: table-row;

示例

讓我們看看完整的示例：

<html>
<head>
   <style>
      html,
      body {
         height: 100%;
         width: 100%;
         margin: 0;
         display: table;
      }
      footer {
         background-color: black;
         color: white;
         display: table-row;
         height: 0;
      }
   </style>
<head>
<body>
   <center>
      <div id="container">
      <h2>Demo Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ipsum mi, pretium
         finibus varius in, efficitur sit amet purus. Nam neque felis, efficitur vel eleifend at, posuere sed
         lectus. Donec laoreet tristique tortor eget varius. Vestibulum rutrum lectus dolor, id rhoncus
         mauris tempor vitae. Vivamus elementum dapibus ultrices. Maecenas facilisis sem nec quam
         fringilla, eu venenatis leo vehicula.</p>
      <p>Donec maximus urna nunc, vel scelerisque arcu tincidunt ultricies. Vestibulum
         tristique fermentum eros, a suscipit massa euismod quis. Praesent magna libero, feugiat quis
         magna at, bibendum faucibus mauris. Fusce at hendrerit nunc, non iaculis nisl. Integer facilisis
         tempor nibh eu faucibus. Ut cursus hendrerit justo, sit amet eleifend enim accumsan et. Ut
         lobortis massa quis leo dapibus cursus.</p>
      <p>Suspendisse efficitur condimentum dolor. Quisque sit amet dictum urna. Aliquam
         est nunc, ornare et vestibulum quis, volutpat a magna. Proin consequat lectus a tellus finibus, quis
         venenatis felis varius. Sed maximus, dui a accumsan imperdiet, nibh mauris facilisis metus, sed
         iaculis leo tellus nec augue. Maecenas ornare feugiat nunc fermentum porttitor. Sed fermentum
         eros at lorem venenatis, sed tempus sem varius. Maecenas lobortis enim sed pretium ultricies.
         Aliquam et dui suscipit, suscipit tortor id, consectetur odio. Vestibulum vel eros quis ante
         scelerisque suscipit imperdiet a dolor. Vivamus faucibus vitae lacus id interdum. Vivamus blandit,
         odio sed scelerisque gravida, nibh eros malesuada nunc, non lacinia elit risus non augue. Ut luctus
         tempor aliquam.</p>
      <p>Sed maximus, dui a accumsan imperdiet, nibh mauris facilisis metus, sed iaculis leo
         tellus nec augue. Maecenas ornare feugiat nunc fermentum porttitor. Sed fermentum eros at
         lorem venenatis, sed tempus sem varius. Maecenas lobortis enim sed pretium ultricies. Aliquam
         et dui suscipit, suscipit tortor id, consectetur odio. </p>
      <footer>
         FOOTER<br /> This is the Footer... Sed maximus, dui a accumsan imperdiet, nibh
         mauris facilisis metus, sed iaculis leo tellus nec augue
      </footer>
   </center>
</body>
<html>

更新於：2022年10月18日

435 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告