stricky footer的三种解决方案详解

“sticky footer”的目标就是让footer永远处于页面底部，无论页面的内容高度是多少。下面介绍三种实现“sticky footer”的方法。

方法一：使用flex布局

flex布局可以很容易地实现sticky footer。步骤如下：

在html里添加如下代码：

<body>
  <div class="wrapper">
    <div class="content">这里是主要内容</div>
    <div class="footer">这里是footer</div>
  </div>
</body>

在CSS中添加如下代码：

html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
}

.footer {
  flex-shrink: 0;
}

以上代码中，.wrapper 为整个页面的容器，.content 为主要内容区域，.footer 为页脚。display: flex 可以将容器定义为flex布局，flex-direction: column 可以让子元素按垂直方向排列。flex: 1 可以让 .content 元素填充容器剩余的高度，flex-shrink: 0可以防止footer在内容不足时被压缩。

下面是一个示例：

https://codepen.io/paolodet2022/pen/DamvqJ

方法二：使用grid布局

另一个实现sticky footer的方法是使用grid布局。步骤如下：

在html里添加如下代码：

<body>
  <div class="wrapper">
    <div class="content">
      这里是主要内容
    </div>
    <div class="footer">
      这里是footer
    </div>
  </div>
</body>

在CSS中添加如下代码：

html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.content {
  grid-row: 1 / 2;
}

.footer {
  grid-row: 3 / 4;
}

以上代码中，.wrapper 为整个页面的容器，.content 为主要内容区域，.footer 为页脚。display: grid 可以将容器定义为grid布局，grid-template-rows: auto 1fr auto; 可以将容器分成三行，使内容区域在第一行，页脚区域在第三行。

下面是一个示例：

https://codepen.io/paolodet2022/pen/ZEQaQrd

方法三：使用绝对定位

第三种方法是使用绝对定位。步骤如下：

在html里添加如下代码：

<body>
  <div class="wrapper">
    <div class="content">
      这里是主要内容
    </div>
  </div>
  <div class="footer">
    这里是footer
  </div>
</body>

注意这里的 .footer 不是 .wrapper 的子元素。

在CSS中添加如下代码：

html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  min-height: 100%;
  position: relative;
  padding-bottom: 50px; /* 与页脚高度相等 */
}

.content {
  padding: 38px 0; /* 依次为: 上内边距, 下内边距  */
  margin-bottom: -38px; /* 上下内边距总计为footer高度 */
}

.footer {
  position: absolute;
  bottom: 0;
  height: 50px; /* 与上面padding-bottom相等 */
}

以上代码中，.wrapper 为整个页面的容器，position: relative 可以将其变成相对定位。并通过 padding-bottom 加上与footer高度相等的一段底部padding。 .content 为主要内容区域，通过 padding-top 和 padding-bottom 来让内容区域与 footer 有一段距离。.footer 利用绝对定位，让footer位于页面底部。

下面是一个示例：

https://codepen.io/paolodet2022/pen/YzpvMEb

以上就是三种实现“sticky footer”的方法，可以根据实际情况选择不同的实现方式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：stricky footer的三种解决方案详解 - Python技术站

stricky footer的三种解决方案详解

方法一：使用flex布局

方法二：使用grid布局

方法三：使用绝对定位

相关文章