将页脚定位在屏幕弹性框的底部 - CSS

有时候需要将网站页脚固定在屏幕底部，本文将介绍如何使用CSS实现这一目标。

使用绝对定位

一种有效的方法是使用绝对定位，将页脚放置在屏幕底部。具体步骤如下：

1. 给页面添加一个容器，将该容器设置为flex布局，并设置flex-direction属性为column，以使其为竖向布局。
2. 在该容器中添加网站主体内容，并将主体内容的flex-grow属性设置为1，以使其占据剩余空间。
3. 在该容器中添加页脚，并将页脚的position属性设置为absolute，bottom属性设置为0，以使其固定在屏幕底部。

代码如下：

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
}

main {
    flex-grow: 1;
}

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

使用sticky属性

另一种方法是使用CSS的sticky属性，使页脚在屏幕底部时“粘”在屏幕上。具体步骤如下：

1. 给页脚添加一个容器，并将该容器设置为flex布局，并设置justify-content属性为flex-end，使页脚容器始终在页面底部。
2. 将页脚容器的position属性设置为sticky，bottom属性设置为0，以使其粘在屏幕底部。

代码如下：

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
}

footer.container {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 50px;
}

注意事项

• 如果页面高度不足以铺满屏幕，以上两种方法都无法将页脚固定在屏幕底部。
• 使用绝对定位的方法可能会使主体内容被页脚遮挡，需要根据具体情况进行调整。
• 使用sticky属性的方法需要考虑兼容性问题，IE、Edge浏览器可能不支持该属性。
• 以上两种方法在使用时需要考虑不同屏幕分辨率下的显示效果，可以使用@media查询进行调整。