css让页脚保持在底部位置的四种方案

下面我将详细讲解“CSS让页脚保持在底部位置的四种方案”的完整攻略。

一、利用定位方式

通过给页脚使用绝对定位和相对定位的方式实现让页脚保持在底部位置。

代码示例：

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

.wrapper {
    min-height: 100%;
    position: relative;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
}

二、利用flex布局

这种方式通过使用flex布局实现让页脚保持在底部位置。

代码示例：

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

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

.content {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
    height: 40px;
}

三、利用grid布局

这种方式通过使用grid布局实现让页脚保持在底部位置。

代码示例：

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

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

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

.footer {
    height: 40px;
}

四、利用sticky footer

这种方式通过使用sticky footer实现让页脚保持在底部位置。

代码示例：

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

.wrapper {
    min-height: 100%;
}

.content {
    padding-bottom: 40px;
}

.footer {
    height: 40px;
    position: sticky;
    bottom: 0;
}

以上就是“CSS让页脚保持在底部位置的四种方案”的完整攻略，希望能够对你有所帮助。

另外，这里提供两个示例链接供你参考：

1. 基于定位的实现方式示例
2. 利用flex布局的实现方式示例