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

.content {
    min-height: 100%; /* 使内容至少与视口高度一样，确保footer在底部 */
    margin-bottom: -50px; /* 根据footer的高度调整 */
}

.footer {
    height: 50px; /* 设置footer的高度 */
    background-color: #f8f9fa; /* 背景色 */
    text-align: center; /* 文字居中 */
    line-height: 50px; /* 垂直居中 */
}