纯css 实现footer 一直在页面底部，不随页面滚动

今天我们要的是一个常见的设计需求：确保页脚（footer）始终位于页面底部。接下来，让我们一起解决方案。

要实现这一效果，首先需要在CSS上下一番功夫。以下是实现该功能的样式代码：

```css

html, body, sticker {

height: 100%;

}

body > sticker {

height: auto;

min-height: 100%;

}

stickerCon {

padding-bottom: 40px; / 为页脚预留空间 /

}

footer {

position: absolute; / 绝对定位确保页脚始终位于底部 /

bottom: 0; / 底部对齐 /

margin-top: -40px; / 上边距与stickerCon的padding-bottom相抵消 /

height: 40px; / 页脚高度 /

width: 100%; / 页脚宽度占满全屏 /

text-align: center; / 文本居中对齐 /

line-height: 40px; / 行高与页脚高度一致，使文本垂直居中对齐 /

color: ABA498; / 字体颜色 /

font-size: 12px; / 字体大小 /

background: fafafa; / 背景色 /

border-top: 1px solid E7E7E7; / 上边框样式 /

}

```

接下来是HTML结构部分，我们创建了两个主要容器：`sticker`和`footer`。其中`sticker`包含了页面主要内容，而`footer`则用于放置页脚内容。

```html

```

通过这样的CSS样式和HTML结构，你可以确保页脚始终位于页面底部，不论页面内容多少，页脚都会保持在底部。这种方法在实际开发中非常常见，适用于各种类型的设计需求。希望这个案例能为你带来启发和帮助。