要让一个网页的页脚紧贴在页面底部，可以使用 CSS 的技巧来实现。以下是一些实现方式的详细讲解：
1. 使用 flex 布局
使用 flex 布局可以很容易地将页脚放置在页面底部。首先需要设置页面的主体部分为一个 flex 容器，让其占据整个页面的高度。接着将页脚设置为 flex 容器中的项（item），并添加一个 margin-top 值为 auto，这样页脚就会自动向上移动到容器的底部。
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
min-height: 100%;
display: flex;
flex-direction: column;
}
.main {
flex: 1;
}
.footer {
margin-top: auto;
}
2. 使用绝对定位
另一种实现方式是使用绝对定位（absolute positioning）。首先需要将页脚的 position 属性设置为 absolute，让其脱离文档流，可以自由定位。接着将 bottom 属性值设为 0，让其紧贴页面底部。
.container {
position: relative;
min-height: 100%;
}
.main {
padding-bottom: 50px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
示例说明
下面是一个使用 flex 布局实现的示例，可以在 HTML 文件中添加以下代码：
<body>
<div class="container">
<header>Header</header>
<main class="main">Main Content</main>
<footer class="footer">Footer</footer>
</div>
</body>
然后将上述 CSS 代码添加到 style 标签或单独的 CSS 文件中即可。
另外一个使用绝对定位实现的示例可以在 HTML 文件中添加这部分代码：
<body>
<div class="container">
<header>Header</header>
<main class="main">Main Content</main>
<footer class="footer">Footer</footer>
</div>
</body>
接着将上述 CSS 代码添加到 style 标签或单独的 CSS 文件中即可。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：让页脚紧贴页面底部的CSS代码 - Python技术站
微信扫一扫 
支付宝扫一扫 