📌  相关文章
📜  CSS 固定底部 - CSS (1)

📅  最后修改于: 2023-12-03 15:00:08.190000             🧑  作者: Mango

CSS 固定底部

在某些情况下，我们希望网页的底部内容始终固定在页面底部，无论页面内容的高度如何变化。这可以通过 CSS 来实现。

实现方法
方法一：使用 position 和 bottom 属性

通过将底部元素的 position 属性设置为 fixed，并将 bottom 属性设置为 0 来实现固定底部的效果。

/* 底部元素样式 */
#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

具体实现效果见下方展示代码。

方法二：使用 flex 布局

通过使用 flex 布局，可以将主体内容元素的高度设置自适应，并将底部内容元素“粘”在底部。

/* 父元素设置为 flex 布局 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 主体内容元素 */
#main {
  flex: 1;
}

/* 底部元素 */
#footer {
  flex-shrink: 0;
  width: 100%;
}
代码示例

详细演示下述两种方法的效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Document</title>
    <style>
      /* 方法一 */
      #footer-1 {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #333;
        color: #fff;
        padding: 10px;
        text-align: center;
      }

      /* 方法二 */
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }

      #main {
        flex: 1;
      }

      #footer-2 {
        flex-shrink: 0;
        width: 100%;
        background-color: #333;
        color: #fff;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <!-- 方法一 -->
    <div id="footer-1">底部内容（方法一）</div>

    <!-- 方法二 -->
    <div id="main">
      <p>网页主体内容</p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
        totam nostrum numquam eapat autem, doloremque suscipit. Ex, nisi qui
        earum cupiditate illo accusantium vero iusto dolor, a quo consectetur
        quibusdam!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
        totam nostrum numquam epellat autem, doloremque suscipit. Ex, nisi qui
        earum cupiditate illo accusantium vero iusto dolor, a quo consectetur
        quibusdam!
      </p>
    </div>

    <div id="footer-2">底部内容（方法二）</div>
  </body>
</html>
参考文献