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. shell 常用小命令总结

      1. 重命名 1) 较简单的处理命令:mv 原文件名 新文件名 如:mv myFile newName                           ###  将MyFile重命名为newN ...

  2. Leetcode 86. Unique Binary Search Trees

    本题利用BST的特性来用DP求解.由于BST的性质,所以root左子树的node全部<root.而右子树的node全部>root. 左子树 = [1, j-1], root = j, 右子 ...

  3. SQLServer自动备份和自动删除过期文件

    以下为转载的文章: 点击下一步: 自定义名称和说明,点击更改: 点击确定,下一步 1.备份: 选择备份,下一步,再下一步,选择需要备份的数据库: 选择备份文件存放的路径: 点击下一步,选择系统产生的报 ...

  4. tomcat部署web应用的4种方法

    在Tomcat中有四种部署Web应用的方式,简要的概括分别是: (1)利用Tomcat自动部署 (2)利用控制台进行部署 (3)增加自定义的Web部署文件(%Tomcat_Home%\conf\Cat ...

  5. Oracle 应用于.NET平台

    1. 回顾ADO.NET ADO.NET是一组用于和数据源进行交互的面向对象类库集,它存在于.Net Framework中.通常情况下,数据源可以是各种类型的数据库,利用ADO.NET可以访问目前几乎 ...

  6. POJ 2533 Longest Ordered Subsequence（最长上升子序列（NlogN）

    传送门 Description A numeric sequence of ai is ordered if a1 < a2 < ... < aN. Let the subseque ...

  7. [JavaEE]调用Restful Service 出现415 Unsupported Media Type的问题（Rest Request Header中的Content-Type问题）

    用Chrome的插件Simple REST Client 调用POST的REST服务时,老是报415错误,如图. 一开始就以为是服务端的问题,各种google,百度,折腾了一下午未果. 晚上继续看,一 ...

  8. mysql 某周的起始和结束日期

    转自:http://bbs.csdn.net/topics/370096126 t_table有数据如下:year    Week2011    22011    32011    42011     ...

  9. SQL Server的数据库连接的极限在哪儿？

    在软件设计中,关于多层的设计,有一部份是有关数据库的. 设计上分成这样三层 客户端UI -- 应用服务器 -- 数据库服务器 有个说法是,可以在应用服务器这一层共享使用数据库连接池,从而减轻数据库服务 ...

  10. gnuplot使用1

    安装之后,迫切需要运行一个程序来看看,首先要找到软件默认的使用路径: 输入 show loadpath命令就会显示默认查找的几个路径, loadpath is loadpath from GNUPLO ...