让页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部的方法
2024-09-30 03:40:36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body {
height: 100%;
padding: 0;
margin: 0;
text-align: center;
} #container {
min-height: 100%;
position: relative;
}
.header {
line-height: 80px;
font-size: 60px;
height: 80px;
background-color: #eee;
}
.body {
font-size: 40px;
padding-bottom: 80px;
}
.footer{
line-height: 80px;
height: 80px;
width: 100%;
font-size: 60px;
position: absolute;
background-color: #eee;
bottom: 0;
}
</style>
</head>
<body>
<div id="container">
<div class="header">header</div>
<div class="body">
body<br>body<br>body<br>body<br>body<br>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body {
height: 100%;
padding: 0;
margin: 0;
text-align: center;
} .header {
line-height: 80px;
font-size: 60px;
height: 80px;
background-color: #eee;
position: fixed;
left:0;
right:0;
}
.body {
font-size: 40px;
padding-bottom: 80px;
min-height: 100%;
box-sizing: border-box;
padding-top:80px;
margin-bottom: -80px;
}
.footer{
line-height: 80px;
height: 80px;
width: 100%;
font-size: 60px; background-color: #eee; }
</style>
</head>
<body> <div class="header">header</div>
<div class="body">
body<br>body<br>body<br>body<br>body<br>
</div>
<div class="footer">footer</div> </body>
</html>
最新文章
- sqlserver性能调优第一步
- C# 多線程&BackgroundWorker概念入門教程
- 中国175个 AAAAA级风景区，去过20个 以上，你就是旅游达人
- Oracle转MySQL
- oracle case when 在查询时候的用法。
- Python成长笔记 - 基础篇 （二）python基本语法
- mssql 置疑的处理
- WEB-INF目录与META-INF目录的作用
- Fixflow引擎解析(四)(模型) - 通过EMF扩展BPMN2.0元素
- 比量iOS6/iOS7, 3.5inch/4.0inch
- Java企业微信开发_11_异常：java.net.UnknownHostException: qyapi.weixin.qq.com
- C代码通过编译器编译成可执行文件， 需经历 预处理、编译、汇编、链接 四个阶段
- UVA1533-Moving Pegs（BFS+状态压缩）
- Django之CRM项目Day6-公私户转换问题解决 班主任功能
- 多个Activity之间共享数据的方式
- POJ 1661 Help Jimmy（DP/最短路）
- 使用VS2013自带的PreEmptive Dotfuscator and Analytis来混淆C#代码
- 【Think in java读书笔记】序列化
- 【BZOJ1930】【SHOI2003】吃豆豆
- 缓存框架有使用过哪些？memcache和redis有什么区别？项目中，怎么去选择？