CSS实现footer一直在页面底部
来源:互联网 发布:单片机编译链接 编辑:程序博客网 时间:2024/04/27 20:29
CSS实现footer一直在页面底部,如果文档不够一页,这footer在底部,否则,footer跟随在文档底部
效果图如下:
HTML代码如下:
<div class="wrapper"> <div class="header"> <h4>Header</h4> </div> <div class="container"> <h4>Container</h4> <p>container</p> <p>container</p> <p>container</p> <p>container</p> <p>container</p> <p>container</p> <p>container</p> <p>container</p> <p>container</p> <p>Last Container</p> </div> <div class="footer"> <h4>Footer</h4> </div> </div>
CSS代码如下:
* { margin: 0; padding: 0;}html,body { height: 100%;}.wrapper { min-height: 100%; position: relative;}.header { height: 50px; background: #999;}.container { padding-bottom: 100px;}.footer { background: #999; position: absolute; bottom: 0; width: 100%; height: 100px;}
0 0
- CSS实现footer一直在页面底部
- footer适应在窗口或者页面底部的css实现方法
- 【转】DIV+CSS页面让footer始终在底部
- css让footer永远保持在页面底部
- Css Sticky Footer将页脚固定在页面底部
- 【Web Trick 4】CSS 实现footer固定页面底部
- footer 在页面对底部
- <footer>始终在页面底部
- 将footer固定在页面底部的实现方法
- 实现底部footer在内容较少时固定在页面底部
- 怎么让footer始终在页面底部?
- css实现footer底部自粘
- JS实现让页脚一直固定在页面底部
- css让footer始终位于页面的最底部
- css让footer始终位于页面的最底部
- 无论页面内容多长,footer始终在页面底部
- footer固定在底部
- 如何将页脚固定在页面底部(sticky footer)
- python抓页面基础知识
- 唯一性索引的意义
- php获取本周日期,及本周起始时间
- IDEA工具web.xml报错param-value element not allow here
- List
- CSS实现footer一直在页面底部
- 应对氧化应激改善糖尿病治疗
- 进程上下文VS中断上下文
- 关于C++ const 的全面总结
- Java多线程理解
- hdu 1999 可摸数问题
- Tensorflow - Tutorial (6) : TensorBoard 可视化工具
- android camera setParameters failed
- jquery 常用的对字符串进行操作的方法小结