CSS让页脚停留在底部
一、概述
当我们打开一个页面时，有时会发现页脚并没有停留在底部，而是被内容撑得很高，导致我们必须要向下滚动才能看到页脚。今天我们来讨论如何通过CSS让页脚停留在底部。
二、使用position属性
我们可以使用CSS中的position属性来实现页脚停留在底部。具体来说，我们需要设置页脚的position属性为fixed，bottom属性为0，然后再为页面主体添加一个padding-bottom属性，值为页脚的高度。
下面是示例代码：
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
background-color: #333;
color: #fff;
}
main {
padding-bottom: 100px; /* 与页脚高度相同 */
}
上面的代码中，我们设置了一个高度为100px的页脚，并将其position属性设置为fixed，bottom属性为0。然后，我们为页面主体添加一个padding-bottom属性，值为页脚的高度，这样便可使页脚固定在底部。
需要注意的是，如果页面主体中还有其他绝对定位的元素，则可能会覆盖到页脚，因此需要根据实际情况进行调整。
三、使用flex布局
除了上述方法外，我们还可以使用CSS3中新增的flex布局来实现页脚停留在底部。
具体来说，我们需要为整个页面设置一个flex布局，并将页面主体设置为flex-grow属性为1，这样页面主体就会根据实际内容高度而自动填充剩余空间。然后，再将页脚放在flex容器的底部，这样就可以实现页脚固定在底部了。
下面是示例代码：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex-grow: 1;
}
footer {
margin-top: auto;
width: 100%;
height: 100px;
background-color: #333;
color: #fff;
}
上面的代码中，我们首先为整个页面设置了一个flex布局，并将其flex-direction属性设置为column，这样整个页面就会以垂直方向排列。然后，我们将页面主体的flex-grow属性设置为1，表示其在剩余空间中占据的比例为1，这样页面主体就会自动填充剩余空间。最后，我们将页脚的margin-top属性设置为auto，表示将其推到flex容器的底部，以实现页脚固定在底部的效果。
四、总结
本文介绍了两种实现页脚固定在底部的方法，即使用position属性和flex布局。需要注意的是，这两种方法各有优缺点，需要根据实际情况进行选择。同时，我们还需要注意，使用这些方法可能会导致页面出现滚动条，这可能会影响页面的美观度，因此建议仅在必要时使用。