css如何页脚 |css转scss 在线

使用position属性

.footer {
position: absolute;
bottom: 0;
}

这样就可以将页脚放在页面的最底部，无论内容有多少。

使用flexbox布局

.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.footer {
margin-top: auto;
}

这个方法需要将整个页面用flexbox布局，并将页脚放在最后一个元素。通过将页脚的上边距设置为auto，可以让其自动填充剩余空间。

使用grid布局

.container {
display: grid;
grid-template-rows: auto 1fr auto;
}
.content {
grid-row: 2 / span 1;
}
.footer {
grid-row: 3 / span 1;
}

通过将整个页面用grid布局，并将内容和页脚分别放在相应的网格中，可以让页脚自动填补剩余空间。