android html footer 固定,前端小技巧之footer固定

想滚的footer

html:

css:

html, body { height: 100%; //关键1}

.main-container { min-height: 100%; //关键2 position: relative;}

.main-content { height: 1200px; padding-bottom: 70px; //关键3}

footer {

height: 70px;

background-color: #4d4d4d;

width: 100%;

position: absolute; //关键4

bottom: 0;

}

效果：

Paste_Image.png

关键1：一定要设置html和body的高度为100%，保证内容不足的时候撑开页面，保证footer在底部。

关键2：不要设置根div的class为container。因为container包含了很多html原生的样式，需要自己做调整。并且一定要设置根div的最小高度为100%，原因和关键1一样。

关键3：一定要设置主内容的padding-bottom为footer的高度，避免在页面最底部出现footer遮盖主内容的现象。

关键4：设置footer相对于父div为绝对位置。

android html footer 固定,前端小技巧之footer固定相关推荐

Android Coding利器之掌握小技巧，助你Coding更上一层楼~
本文讲的是Android Coding利器之掌握小技巧,助你Coding更上一层楼~,话说前几天在网上浏览到一大牛写的关于Android布局优化的文章,看后感触很深,回过头看看自己写过的代码,发现还是 ...
固定定位小技巧（HTML、CSS）
固定定位小技巧(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta charset ...
android图片底部居中对齐,android开发图片居中的小技巧
释放双眼,带上耳机,听听看~! 制作UI布局的时候都会出现复杂的LinearLayout嵌套,并且常常会被一些问题混淆,警惕在android中图片居中的小技巧大家都知道吗?别着急,下文是技术狗小编为大 ...
html前端小技巧—字体及颜色色值准确设置
今天分享下"html前端小技巧-字体及颜色色值准确设置"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一 ...
每天一个前端小技巧——生成gif动图下载
每天一个前端小技巧--生成gif动图下载动态热图的展现,分别展现某个时间段的热图时间变化,例如:最近一周七天内,每天的热图分布变化图:这个动态变化的图生成一个gif图提供下载是否可行? 实现方案: ...
Android Snackbar使用方法及小技巧-design
Snackbar和Toast相似,都是为了给用户提供交互信息,Snackbar是固定在底部的,显示时从下往上滑出要使用Snackbar,需要在项目的build.gradle中添加依赖 depende ...
Android中的资源复用小技巧
前言做了很多项目,发现每个项目里都有大量的相似图标,比如每个颜色一种.每个角度一种(左箭头.右箭头)等等,虽然这些图标很小占用不了太多资源.但是当我们需要change的时候就得一个个去替换,其实在a ...
开发Android应用提升性能的小技巧
前言 2015年,Android OS 目前在手机操作系统的市场占有率已达59%,权威机构预计,Android市场占有率在2016年将达到63%,由于Android的开放性,未来占有率还将不断增加, ...
JavaScript笔记-使用JS管理URL链接(前端小技巧)
如下这个JavaScript代码: var common_ops = {buildUrl:function( path ,params ){//params = { "test": ...

android html footer 固定,前端小技巧之footer固定

android html footer 固定,前端小技巧之footer固定相关推荐

最新文章

热门文章