我正在开发一个网站项目，我想确保我的页脚始终位于页面底部。如果内容比视口高度短，页脚仍应粘在底部。但是，如果有更多内容需要滚动，则页脚应仅出现在主要内容之后。
我尝试过使用position:fixed;页脚，但即使当我滚动时它仍保留在屏幕上。我怎样才能实现一个如描述的那样的粘性页脚？
这应该像您所描述的那样工作。 它使用 CSS 弹性框将页脚推到底部。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
main {
flex: 1;
padding: 20px;
background: #f4f4f4;
}
footer {
background: #333;
color: white;
text-align: center;
padding: 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<header>
<h1>Footer Test</h1>
</header>
<main>
<p>main content....</p>
<button onclick="document.getElementById('expand').style.display = 'inherit'">
click
</button>
<div id='expand' style='display:none;'>
<br><br><br><br><br><br>
<b>extra content</b>
</div>
</main>
<footer>
<p>form content.....</p>
</footer>
</div>
</body>
</html>