@兲蛋，有多种方法可以实现这个效果，而不使用JavaScript。以下是一些可能的方法：
使用position: sticky;和calc()：
在这种方法中，您可以将页脚的position设置为sticky，并结合使用calc()来计算bottom属性的值，以使页脚保持在底部，但仅在内容足够长时才显示在底部。
#footer {
background-color: #333;
color: #fff;
padding: 10px;
position: sticky;
bottom: calc(100vh - 100%); /* 或适当的计算 */
}
使用min-height和flexbox：
这种方法需要使用min-height来设置内容容器的最小高度，以确保页面内容高度不小于屏幕高度。然后，通过flexbox布局将页脚粘附在页面底部。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.container {
flex: 1;
}
#footer {
background-color: #333;
color: #fff;
padding: 10px;
flex-shrink: 0;
}
使用grid布局：
使用grid布局也可以实现相似的效果。将页脚作为最后一个单元格放置在网格中，并设置内容容器的高度以确保页面内容高度不小于屏幕高度。
body {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
margin: 0;
}
#footer {
background-color: #333;
color: #fff;
padding: 10px;
}
这些方法都可以实现所需的效果，具体选择哪种方法取决于您的项目需求和偏好。您可以根据需要进行自定义和调整，以满足您的设计要求。无论您选择哪种方法，都不需要使用JavaScript。
当页面内容高度大于屏幕高度时，Footer 固定在页面底部，即：跟随在内容尾部，滚动条到最底部时看到，说一下有多少种方案可以实现这个效果