最新文章
- 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
- 共1139人围观
简介当我们在写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>