body, html {  

    min-height: 100vh; /* vh是视口高度的单位，100vh等于视口高度的100% */  

    display: flex;  

    flex-direction: column;  

    margin: 0;  

    padding: 0;  

}  

  

/* 假设你的主内容容器有一个ID或类名为main-content */  

#main-content {  

    flex: 1; /* 这会使main-content占据所有剩余空间 */  

}  

  

/* footer的样式 */  

footer {  

    margin-top: auto; /* 将footer推送到main-content之后 */  

}