最新文章
- MySQL中, group by 和 order by 一起使用会有排序问题,group by 和 order by 同时使用时要注意的地方
- Vue学习笔记(10) ——Vue组件中的data和methods
- Vue学习笔记(9) ——Vue组件创建的几种方式
- Vue学习笔记(8) ——Vue实例的生命周期
- Vue学习笔记(7) —— 过滤器 filter的基本使用
- Vue学习笔记(6) ——v-if指令和v-show指令
- Vue学习笔记(5) —— v-for指令和key属性
- Vue学习笔记(5) —— Vue中样式-class样式和style样式
- Vue学习笔记(4) —— v-model指令,双向数据绑定
- Vue学习笔记(3) —— Vue事件修饰符
关注我

在线咨询
x
有什么可以帮到你

点击咨询
HTML中,当页面内容高度不够高时,如何让footer始终位于页面的最底部
- 分类:WEB前端
- 时间:2018-09-09
- 共1002人围观
简介当我们在写html页面时,经常会遇到一个情况,当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,我们想优化其页面效果,即想让页脚始终在页面最底部
一、html页面代码
<div class="container"> <div class="header"></div> <div class="body"> <p>这是一个p标签</p> <p>这是一个p标签</p> </div> <div class="footer">这是一个footer</div> </div>
二、footer随着滚动条的滚动而滚动
<style> .container{ position:relative; width:100%; min-height:100%; } .body{ padding-bottom:50px; } .footer{ height:50px; position:fixed; bottom:0px; left:0px; } </style>
三、footer始终在其底部固定
<style> .container{ position:relative; width:100%; min-height:100%; } .body{ padding-bottom:50px; } .footer{ height:50px; position:fixed; bottom:0px; left:0px; } </style>