div footer标签css实现位于页面底部固定-前端开发

要实现一个位于页面底部固定的 footer，可以使用如下的 CSS 方案：

要实现一个位于页面底部固定的 footer，可以使用如下的 CSS 方案：

添加 CSS 样式代码

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
  text-align: center;
}

第一步的 CSS 样式代码解释
position: fixed 属性将元素置于浏览器窗口内的固定位置，即不随页面滚动而改变位置。
bottom: 0 属性使元素底部与 viewport 底部对齐。
width: 100% 属性设置元素宽度撑满整个 viewport。
background-color: #f5f5f5 属性设置元素背景色为灰色。
text-align: center 属性使元素内文字居中对齐。
添加 HTML 代码

<body>
  <div class="content">
    <!-- your webpage content here -->
  </div>
  <div class="footer">
    <!-- your footer content here -->
  </div>
</body>

其中，.content 类定义页面正文区域，以撑开页面高度，同时使 .footer 元素类固定在页面底部。

示例一

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <style>
      .content {
        height: 2000px;
      }

      .footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #f5f5f5;
        text-align: center;
        padding: 1em;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h1>Page Title</h1>
      <p>This is some content.</p>
    </div>
    <div class="footer">
      <p>Copyright &copy; 2021</p>
    </div>
  </body>
</html>

运行上述代码可以实现类固定在页面底部的 footer。

示例二

下面的示例使用 CSS Flexbox 实现 footer 粘贴在浏览器底部。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
      }

      .page-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
      }

      .content {
        flex: 1;
        padding-top: 1em;
      }

      .footer {
        background-color: #f5f5f5;
        text-align: center;
        padding: 1em;
      }
    </style>
  </head>
  <body>
    <div class="page-wrapper">
      <div class="content">
        <h1>Page Title</h1>
        <p>This is some content.</p>
      </div>
      <div class="footer">
        <p>Copyright &copy; 2021</p>
      </div>
    </div>
  </body>
</html>

该示例中，我们将 .content 和 .footer 包裹在一个横向布局的容器中，并使用 flex-direction: column 让.content` 上方留有一定空白。

这样做的结果是.content元素可以自由地伸展以填充余下空间，同时.footer粘附在容器底部。