footer绝对定位但是不在页面最下边解决方案
2016-07-01 12:45
405 查看
方案一
方案二
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>
相关文章推荐
- LeetCode:Next Permutation
- leetcode 100. Same Tree
- [3.0.1]性能调优之调节并行度
- 矩阵分解(rank decomposition)文章代码汇总
- linxu学习之android(一):linux下安装android studio 、android sdk安装教程
- MVC MVP 和 MVVM 的图示
- Android中的坐标系以及获取坐标的方法
- 获取用户SID
- NSNotification调用机制
- python -正则表达式
- 土地购买[Usaco2008 Mar][bzoj 1597]
- js如何判断IE浏览器的版本包括IE11
- java中for和foreach的区别
- JAVA基础知识篇
- Android白话启动篇(Android booting process)
- python判断字符串编码的简单实现方法(使用chardet)
- 服务器TIME_WAIT和CLOSE_WAIT详解和解决办法
- Codeforces-687B Remainders Game
- solr6定时增量更新
- 从MVC到前后端分离