如何让页脚停留在网页的底部？

要将页脚固定在网页底部，可以使用CSS的Flexbox或Grid布局方法。以下是一个简单的示例，使用Flexbox布局将页脚固定在网页底部：

首先，在HTML文件中创建一个容器，将所有内容包含在其中，包括页头、主要内容和页脚。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
       <header>
            <!-- 页头内容 -->
        </header>
        <main>
            <!-- 主要内容 -->
        </main>
       <footer>
            <!-- 页脚内容 -->
        </footer>
    </div>
</body>
</html>

接下来，在CSS文件中设置以下样式：

/* styles.css */

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

header,
main,
footer {
    padding: 20px;
}

footer {
    margin-top: auto;
}

这里的关键是将body的display属性设置为flex，并将flexDirection设置为column。然后，将.container的display属性设置为flex，并将flexDirection设置为column。最后，将footer的margin-top属性设置为auto，这将使页脚自动固定在网页底部，即使主要内容不足以填充整个屏幕，页脚也会始终保持在底部。

这种方法简单易用，不需要使用JavaScript，并且在各种设备和屏幕尺寸上都能正常工作。