两种方式实现footer固定在页面最下方布局

最新推荐文章于 2025-05-22 18:06:21 发布

原创

最新推荐文章于 2025-05-22 18:06:21 发布 · 8.9k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了两种方法来实现网页footer始终保持在页面底部的布局。第一种是通过设置html和body的高度100%，并使用相对定位；第二种方法利用flex布局，设置body为flex容器，使footer始终在底部。这两种方法都具有良好的兼容性，适用于ios 4+、android 2.3+和winphone8+设备。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方式设置html、body高度100%，footer相对body定位：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
position: relative;
background-color: #ccc;
}
.content {
height: 200px;
/*height: 2000px;*/
}
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: orange;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>