如何在 HTML 中让页脚停留在网页底部?

htmlweb developmentfront end technology更新于 2024/6/4 20:28:17

顾名思义，页脚固定在网页底部。例如，在以下页面中，页脚固定在底部，即使页面向上滚动，页脚也保持不变 -

要创建一个固定在底部的页脚，我们将使用 CSS。

使用position属性将页脚设置为固定在网页底部

使用CSS的position属性将页脚设置为固定在网页底部。页脚高度、背景颜色和文本颜色设置如下 -

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>