HTML的footer置于页面最底部的简单实现方法
1. 目标
在网页制作中，我们经常会遇到将footer部分置于页面底部的需求，以便在内容高度不足时，footer始终位于屏幕底部，如下图所示：
将footer置于页面的底部，可以给用户更好的视觉体验和良好的交互感觉，下面就来讲一下这个简单实现的方法。
2. 实现方法
方法1： 使用position:absolute将footer定位到屏幕最底部。代码如下：
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
让footer定位于屏幕的最底部，使用position:absolute，并设置bottom:0将footer置于屏幕底部。需要注意的是，此方法需要给footer一个固定的高度，否则footer会覆盖页面的内容。
方法2： 使用flex布局将底部footer定位于底部。代码如下：
html,body {
height: 100%;
}
.wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
.footer {
height: 60px;
}
这个方法使用flexbox布局，将所有的html和body标签高度设置为100％。创建一个包含三个部分的wrapper，其中第一个部分是header，第二个部分是content，第三部分是footer，并使用flex属性将它们垂直堆叠。将最后一个部分（即footer）定位到底部。
3. 总结
在网页制作中，将footer置于页面底部是非常重要的。通过上述的方法，可以很好地实现这个目标。在第一种方法中，您可以使用position:absolute。在第二种方法中，您可以使用flex布局。这两种方法各有优缺点，您可以根据您的需求，选择通过合适的方式实现。