footer绝对定位但是不在页面最下边解决方案
2024-09-07 00:00:37
方案一
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
box-sizing: border-box;
padding-bottom: 80px; /* .footer 的高度，为 footer 占位 */
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
}
方案二
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body {
height: 100%;
margin: 0;
padding: 0;
} #container {
min-height: 100%;
height: auto !important;
height: 100%;
}
#page {
padding-bottom: 60px;/*高度等于footer的高度*/
}
#footer {
position: relative;
margin-top: -60px;/*等于footer的高度*/
height: 60px;
clear:both;
background: red;
} #header {
padding: 10px;
background: lime;
}
#left {
width: 18%;
float: left;
margin-right: 2%;
background: blue;
}
#content{
width: 60%;
float: left;
margin-right: 2%;
background: green;
}
#right {
width: 18%;
float: left;
background: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="header">Header</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main contentMain contentMain contentMain contentMain contentMain contentMain contentMain contentMain contentMain content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi blanditiis, consequuntur dolorem ea eos magnam necessitatibus numquam, quaerat quia quod rem sint unde. Deserunt dolorum laboriosam minus repellat veniam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, adipisci architecto, blanditiis cumque doloremque, ea earum et maxime non pariatur quas quia quibusdam recusandae similique sit soluta tempora voluptas voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem ea impedit ut vel. Aut culpa exercitationem incidunt itaque non, nulla saepe voluptas. Inventore, molestiae perferendis provident quaerat ullam veniam.
pisicing elit. Accusamus cupiditate facilis fugit inventore iste itaque iusto modi, natus nobis numquam obcaecati odio odit optio ratione sit ullam veniam vero. Vero.
</div>
</div>
</div>
<div id="footer">Footer </div>
</body>
</html>
最新文章
- 用systemd脚本自动启动node js程序
- 天气查询SDK
- mysql explain 中key_len的计算
- ThroughRain第一次冲刺总结
- Linux下crontab命令的用法
- dede默认的表
- 使用git了解代码编写过程
- How to use PhotoshopApplication in maxscript
- json编解码
- visual c++ 2010安装未成功
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
- 推荐六款炫酷的HTML5效果插件
- ZOJ - 3261 Connections in Galaxy War（并查集删边）
- 推荐一个实用的 .gitignore 文件
- C++基类的析构函数定义为虚函数的原因
- nodejs实现新闻爬虫
- Minimum Window Substring LT76
- 【题解】 [ZJOI2006]书架 （Splay）
- GCD 实现生产-消费 模式
- MYSQL MVCC实现及其机制