在HTML/CSS中将页脚保留在底部可以通过以下几种方法实现：
- 使用固定高度的页脚：可以通过设置页脚的高度和底部边距来实现。首先，将页面的整体布局分为头部、内容区域和页脚三个部分。然后，给内容区域设置一个底部边距，高度等于页脚的高度。最后，给页脚设置固定的高度和底部边距为0，这样页脚就会一直保持在页面底部。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
min-height: 100%;
position: relative;
}
.content {
padding-bottom: 50px; /* 页脚的高度 */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px; /* 页脚的高度 */
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="container">
<header>头部内容</header>
<div class="content">
<!-- 内容区域 -->
</div>
<footer class="footer">页脚内容</footer>
</div>
</body>
</html>
- 使用flex布局：可以使用flex布局来实现页脚保持在底部。首先，将页面的整体布局分为头部、内容区域和页脚三个部分。然后，给容器设置display: flex，并使用flex-direction: column将子元素垂直排列。最后，给内容区域设置flex-grow: 1，使其占据剩余的空间，页脚就会保持在底部。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
}
.content {
flex-grow: 1;
}
.footer {
height: 50px; /* 页脚的高度 */
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="container">
<header>头部内容</header>
<div class="content">
<!-- 内容区域 -->
</div>
<footer class="footer">页脚内容</footer>
</div>
</body>
</html>
以上两种方法都可以实现将页脚保留在底部，具体选择哪种方法取决于具体的需求和布局。
温馨提示 : 本站内容来自会员投稿以及互联网，所有源码及教程均为作者总结编辑，请大家在使用过程中提前做好备份，以免发生无法预知的错误，源码类教程请勿直接用于生产环境！
