html代码结构
 <body>

     <div class="wrap">

         <div class="head"></div>

         <div class="main"></div>

         <div class="foot"></div>

     </div>

 </body>
CSS代码：
 html, body { height: 100%; }

 .wrap { min-height: 100%; height: auto !important; height: 100%;position: relative; }

 .main { padding-bottom: 100px; }

 .foot { position: absolute; bottom:; width: 100%; height: 100px;}

CSS实现底部固定的更多相关文章

  1. CSS 实现底部固定

    在制作页面有这样一种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越 ...

  2. jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

    http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...

  3. CSS Sticky Footer: 完美的CSS绝对底部

    CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在CSS的世界里,似乎没有完美这种说法.所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧. 先说我们为什么会使用到这个C ...

  4. 微信小程序之顶部固定和底部固定

    顶部固定 <view style="position:fixed;top:0;"> ...... </view> 底部固定 <view style=& ...

  5. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  6. 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置

    1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...

  7. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

  8. css - 紧贴底部的页脚

    有的时候,由于页面长度不够,页面底部的页脚会很尴尬的跑上来,如图: 有的同学可能会想用position:fixed;bottom:0;来永远居底.但有些场景确实不适合. 这是我从YII2中找到的简单解 ...

  9. 解决fixed在苹果手机抖动问题/头部底部固定布局

    1.头部和底部固定,中间内容滚动,不涉及fixed 1)absolute与height:100% <!DOCTYPE html><html><head> <m ...

随机推荐

  1. 【BZOJ-1568】Blue Mary开公司 李超线段树 （标记永久化）

    1568: [JSOI2008]Blue Mary开公司 Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 557  Solved: 192[Submit ...

  2. 【BZOJ-1179】Atm Tarjan + SPFA

    1179: [Apio2009]Atm Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 2407  Solved: 993[Submit][Status ...

  3. C#把数据写到硬盘指定位置

    FileStream fs; StreamWriter sw;string RootPath = @"C:\Advantech" + "\\tempData\\" ...

  4. HDU 4857 逃生（反向拓扑排序）

    传送门 Description 糟糕的事情发生啦,现在大家都忙着逃命.但是逃命的通道很窄,大家只能排成一行. 现在有n个人,从1标号到n.同时有一些奇怪的约束条件,每个都形如:a必须在b之前.同时,社 ...

  5. “K米” 软件产品评测

    第一部分 调研,评测 评测: 第一次上手体验:KTV相信很多人都有去过,大部分包厢只有哦一个点歌台,相信很多人都会烦恼于一堆人挤在小小的点歌台前点歌的样子,还有些人不太好意思跑到点歌台点歌,常常是碰到 ...

  6. mysql修改引擎

    1 查看系统支持的存储引擎 show engines; 2 查看表使用的存储引擎 两种方法: a.show table status from db_name where name='table_na ...

  7. angularjs中ng-selected使用方法

    ng-selected只能应用在option标签上,就像ng-submit只能应用在form标签上一样. ng-selected指令为select设置了指定的选中值,HTML规范不允许浏览器保存类似s ...

  8. aircrack-ng 多网卡启动后环境清理

    #!/bin/sh pkill airodump airmon-ng stop wlan0mon service network-manager restart rm -rf sadsad*

  9. JavaScript学习笔记——运算符和表达式

    javascript运算符 一.运算符和操作数的组合就称为表达式. 二.javascript运算符 (一) 算术运算符 + - * / % var++ ++var var-- --var A. + ( ...

  10. Python基本运算符

    Python基本运算符 什么是操作符? 简单的回答可以使用表达式4 + 5等于9,在这里4和5被称为操作数,+被称为操符. Python语言支持操作者有以下几种类型. 算术运算符 比较(即关系)运算符 ...