HTML元素<footer>作为最近的相关元素的页脚，该元素可以是分区内容或分区根元素。<footer>通常包含有关该部分作者的信息，版权信息或相关论文的链接。让我们看一个<footer>元素的简单示例。
<footer> Some copyright info or author info </footer>
制作一个始终位于网页底部的页脚。我们可以调整它在页面底部的位置，这样即使您向下滚动页面，您仍然可以看到页脚。使用position: fixed来创建一个始终出现在页面底部的页脚。
以下是将页脚置于页面底部的语法 -
#footer {
position: fixed;
width: 100%;
height: 35px;
}
为了更好地理解如何将页脚设置在页面底部，请看以下示例。
在下面的示例中，我们正在创建一个网页，在这个网页中，我们使用了position: fixed属性将页脚添加到网页的底部。
<!DOCTYPE html>
<html>
<style>
#tutorial{
background:#D5F5E3;
}
#tutorial1 {
position: fixed;
padding: 10px 10px 0px 10px;
bottom: 0;
width: 100%;
height: 40px;
background: #D7BDE2 ;
}
</style>
<body>
<center>
<div id="tutorial">
<h1>TutorialsPoint</h1>
<div id="tutorial1">The Best E-Way Learning.
</div>
</div>
</center>
</body>
</html>
当脚本被执行时，它将生成一个由应用了样式的文本组成的输出，以及作为页脚的文本，该文本将以应用了样式的方式保持在网页底部。
让我们来看下面的例子，我们在使用 position: absolute 将页脚设置在页面底部。
<!DOCTYPE html>
<html>
<body>
<style>
#container {
min-height:100%;
position:relative;
}
#tutorial {
background:#D5F5E3 ;
padding:10px;
}
#tutorial1 {
padding:10px;
padding-bottom:60px;
}
#tutorial2 {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color:#AED6F1 ;
text-align: center;
}
</style>
<div id="container">
<div id="tutorial">Choose The Course</div>
<div id="tutorial1">
<ol>
<li>HTML</li>
<li>JAVA</li>
<li>PYTHON</li>
</ol>
</div>
<div id="tutorial2">If any doubt contact us at E-mail:tp@welcome</div>
</div>
</body>
</html>
当脚本执行时，将出现一个输出窗口，在网页上显示一个文本和一个有序列表，并在网页底部显示一个使用CSS样式的页脚文本。
一种称为Flexbox的一维布局技术用于将对象排列成行或列。项目可以弹性（扩展）以占用更多空间或收缩以适应更紧凑的位置。
考虑以下示例，在此示例中，我们使用flexbox将页脚设置在网页底部。
<!DOCTYPE html>
<html>
<body>
<style>
#tutorial{
background:red;
}
#tutorial1{
min-height:100px;
display:flex;
flex-direction:column;
justify-content:space-between;
}
</style>
<div id="tutorial1">
<div>
<header>
JamesCameron
</header>
<article>
Directed Avatar2
</article>
</div>
<footer id="tutorial">
Avatar2 2022©
</footer>
</div>
</body>
</html>
运行上述脚本后，输出窗口将弹出，显示应用了CSS的文本以及显示在网页底部的页脚文本。
