将页脚固定在页面底部的CSS实战

将页脚固定在页面底部是一个非常常见的需求，这需要使用CSS来实现。本文将介绍一些基本的CSS技巧和实践，让你能够更好地理解如何实现固定页脚效果。

CSS基础概念

在开始实现之前，我们需要了解一些CSS基础概念，这将有助于我们更好地理解如何构建CSS布局。

position属性：定位属性，可以设置元素的定位方式。常用值有absolute、relative、fixed和static。
盒模型：在CSS中，每个元素都有一个盒子包裹着它，盒子包括内容、内边距、边框和外边距等四个部分。
浮动：元素可以通过设置浮动来脱离文档流，并使其他元素环绕在其周围。
清除浮动：清除浮动后，父元素会自动适应子元素的高度，从而避免在布局中遇到意外问题。

实现固定页脚

了解了CSS基础概念之后，我们就可以开始实现固定页脚了。具体步骤如下：

在HTML中，在body标签中添加一个footer元素，这个元素就是我们要固定的页脚。

<body>
  <header>
    <!-- 添加网站头部，不是本文重点，此处省略 -->
  </header>

  <main>
    <!-- 添加页面主要内容，不是本文重点，此处省略 -->
  </main>

  <footer>
    <!-- 添加页面底部内容，此处即要固定的页脚 -->
  </footer>
</body>

在CSS中设置footer的样式，将其分别设为绝对定位和块级元素，并设置高度和底部的间距（这个距离需要根据实际情况调整，具体取决于你希望页脚与内容之间留出的距离）。

footer {
  height: 50px; /* 设置页脚高度 */
  position: absolute; /* 设置页脚为绝对定位 */
  bottom: 0; /* 设置页脚距离底部的距离为0，即固定在底部 */
  left: 0; /* 设置页脚距离左侧的距离为0 */
  right: 0; /* 设置页脚距离右侧的距离为0 */
  display: block; /* 将页脚元素设置为块级元素 */
  background-color: #333; /* 设置页脚的背景颜色 */
  color: #fff; /* 设置页脚的文字颜色 */
  text-align: center; /* 设置页脚中的文字居中对齐 */
}

修改body的position属性为相对定位relative，以确保footer元素计算其位置时能够参考到body元素。

body {
  position: relative; /* 将body元素设置为相对定位，这样就能够确保footer的位置计算在body内 */
  height: 100%; /* 设置body元素的高度为100%，以占满整个窗口 */
}

如果在页面中使用了浮动元素，需要在footer元素中使用清除浮动clear:both来避免浮动产生的影响。同时，在包含浮动元素的父元素上应该使用overflow: hidden来避免浮动元素溢出父容器的影响。

实现完毕之后，就可以看到固定在底部的页脚效果了。下面是两个示例：

示例1

在这个示例中，我们使用了绝对定位来实现固定页脚。具体实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fixed Footer Example 1</title>
  <style>
    html {
      height: 100%;/*在html中设置一个百分比高度，以确保body元素可以占据整个可视窗口的高度*/
    }

    body {
      margin: 0;/*设置全局样式，确保body元素的边距为0*/
      height: 100%;/*设置body元素的高度为100%*/
      position: relative;/*将body元素设置为相对定位*/
    }

    .content {
      padding-bottom: 60px;/*设置主要内容区的底部内边距，以确保内容不会被页脚所遮挡*/
    }

    footer {
      background-color: #333;
      color: #fff;
      height: 50px;/*设置页脚的高度*/
      width: 100%;
      position: absolute;/*将页脚设置为绝对定位*/
      bottom: 0;
      left: 0;
      right: 0;
      display: block;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="content">
    <h1>Fixed Footer Example 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, reiciendis ullam adipisci voluptatem iure, odio soluta necessitatibus aliquam mollitia enim distinctio pariatur veritatis ab porro totam dignissimos aliquam mollitia enim distinctio pariatur veritatis ab porro totam dignissimos.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, reiciendis ullam adipisci voluptatem iure, odio soluta necessitatibus aliquam mollitia enim distinctio pariatur veritatis ab porro totam dignissimos aliquam mollitia enim distinctio pariatur veritatis ab porro totam dignissimos.</p>
  </div>
  <footer>
    <p>这是个例子页脚</p>
  </footer>
</body>
</html>

示例2

在这个示例中，我们使用弹性布局Flexbox来实现固定页脚。具体实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fixed Footer Example 2</title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .container {
      display: flex;/*使用Flexbox布局*/
      flex-direction: column;/*设置主要内容区为Flexbox布局中的垂直方向*/
      min-height: 100%;/*设置主要内容区的最小高度为100%，可以确保内容占满整个窗口*/
    }

    .content {
      flex: 1;/*设置主要内容区域能够占据剩余空间*/
      padding: 10px;
    }

    footer {
      background-color: #333;
      color: #fff;
      height: 50px;
      width: 100%;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      <h1>Fixed Footer Example 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, reiciendis ullam adipisci voluptatem iure, odio soluta necessitatibus aliquam mollitia enim distinctio pariatur veritatis ab porro totam dignissimos aliquam mollitia enim distinctio pariatur veritatis ab porro totam dignissimos.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, reiciendis ullam adipisci voluptatem iure, odio soluta necessitatibus aliquam mollitia enim distinctio pariatur veritatis ab porro totam dignissimos aliquam mollitia enim distinctio pariatur veritatis ab porro totam dignissimos.
      </p>
    </div>
    <footer>
      <p>这是个例子页脚</p>
    </footer>
  </div>
</body>
</html>

在这两个示例中，我们都使用了不同的方法来实现固定页脚效果，你可以根据你的实际需求和个人喜好选择适合自己的方法来实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：将页脚固定在页面底部的CSS实战 - Python技术站

将页脚固定在页面底部的CSS实战

CSS基础概念

实现固定页脚

示例1

示例2

相关文章