当页面内容高度小于屏幕高度时，Footer 固定在屏幕底部；
当页面内容高度大于屏幕高度时，Footer 固定在页面底部，即：跟随在内容尾部，滚动条到最底部时看到
由chatgpt生成的
HTML结构：
<!DOCTYPE html>
<html>
<head>
<!-- 在这里包含您的CSS链接等 -->
</head>
<body>
<div class="container">
<div class="content">
<!-- 这里是您的页面内容 -->
</div>
<div id="footer">
<!-- 这里是您的页脚内容 -->
</div>
</div>
</body>
</html>
CSS样式：
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
flex: 1;
display: flex;
flex-direction: column;
}
#footer {
background-color: #333; /* 背景颜色，根据需要更改 */
color: #fff; /* 文本颜色，根据需要更改 */
padding: 10px; /* 页脚内边距，根据需要更改 */
position: relative;
width: 100%;
}
.content {
flex: 1;
}
在这个示例中，我们使用Flexbox布局来确保页脚的行为与页面内容的高度相适应。当页面内容高度小于视口高度时，内容容器会自动填充剩余的空间，同时确保页脚固定在屏幕底部。当页面内容高度大于视口高度时，页脚会跟随在内容尾部，当滚动到页面底部时才看到它。
这种方法使用CSS的Flexbox布局来实现您所需的效果，无需使用JavaScript，而且非常灵活和可维护。您可以根据需要进一步自定义样式。
