<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我是网页标题</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1;
padding: 20px;
background-color: #f9f9f9;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
footer a {
color: #fff;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="content">
<h1>欢迎使用</h1>
<p>这里是网页的主要内容区域。当内容高度小于浏览器高度时，Footer 会固定在底部；当内容高度大于浏览器高度时，Footer 会跟随页面滚动。</p>
<p>你可以添加更多内容来测试 Footer 的行为。</p>
</div>
<footer>
<div class="container">
<p class="mb-0">© 2025 我是网页标题. 保留所有权利.</p>
<p class="mb-0"><a href="#">隐私政策</a> | <a href="#">使用条款</a></p>
</div>
</footer>
<script>
function adjustFooter() {
const body = document.body;
const html = document.documentElement;
const footer = document.querySelector('footer');
if (body.scrollHeight <= window.innerHeight) {
footer.style.position = 'fixed';
footer.style.bottom = '0';
footer.style.width = '100%';
} else {
footer.style.position = 'static';
}
}
adjustFooter();
window.addEventListener('resize', adjustFooter);
const observer = new MutationObserver(adjustFooter);
observer.observe(document.body, { childList: true, subtree: true });
</script>
</body>
</html>
代码说明
- HTML 结构：
body 包含一个 content 区域和一个 footer。content 区域是网页的主要内容部分。footer 包含版权信息和链接。
- CSS 样式：
- 使用
flexbox 布局，确保 content 区域自动扩展占满剩余空间。
footer 默认样式为居中文本和背景色。
- JavaScript 逻辑：
adjustFooter 函数动态检查页面内容高度与视口高度的关系，决定 footer 是固定还是跟随滚动。- 监听窗口大小变化和内容变化，确保
footer 行为实时更新。
使用说明
- 将上述代码保存为一个
.html 文件（如 index.html ）。
- 在浏览器中打开该文件，即可看到效果。
- 可以通过增减
content 区域的内容来测试 Footer 的行为。
示例效果
- 如果页面内容较少，Footer 会固定在浏览器底部。
- 如果页面内容较多，Footer 会跟随页面滚动。
免责声明： 本站数据均来自于互联网搜集，如有侵犯您的权利，请联系删除。→
获取金币← →
获取赞助码← →
帮助教程资源汇总←
根据我国《计算机软件保护条例》第十七条规定：“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24小时之内删除，否则后果均由用户承担责任。
