项目中需要实现div一直显示在屏幕的底部，不管页面有多长或者多端都需要满足。

在网上找的用js实现的，移动时会闪动，效果不是特别好。也可能是没找到好的。

相比js,我更希望使用css实现 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> 3 <head> 4 <style type="text/css">

     html,body {

     width:100%;

     height:100%;

     margin:0px;

     padding:0px;

     overflow:hidden;

     }

     #Main {

     position:absolute;

     bottom:0px;

     left:0px;

     width:100%;

     height:100%;

     overflow:auto;

     z-index:1;

     }

     #ToolBar {

     position:absolute;

     bottom:0px;

     width:100%;

     height:auto;

     text-align:center;

     background:#ccc;

     z-index:2;

     overflow:hidden;

     }

     </style>

     </head>

     <body>

     <div id="ToolBar">固定在页面底部不动</div>

     <div id="Main" >

     <div class="clear" style="height:2000px;background:#ff0;"> 我是内容，我足够大吧  </div>

     </div></body>

     </html>

div固定在屏幕底部的更多相关文章

  1. 返回顶部的功能 div固定在页面位置不变

    1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...

  2. 让div固定在顶部不随滚动条滚动

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  3. div 固定宽高 水平垂直居中方法

    div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...

  4. 内容高度小于窗口高度时版权div固定在底部

    <!doctype html><html><head><meta charset="utf-8"><title>文档内容 ...

  5. 让div固定在顶部不随滚动条滚动【转】

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. div固定顶部和底部

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. CSS Div固定在网页顶部、底部、左侧、右侧

    Div固定在网页顶部 .header { width:100%; height:80px; background-color:#FAFAFA; position:fixed; top:; left:; ...

  8. bootstrap div 固定

    div固定在顶部样式: .navbar-fixed-top div固定在底部样式 .navbar-fixed-bottom

  9. div固定在浏览器的最上方，不随滚动条滚动

    #topDIV { position: fixed; ; ; width: 100%; height: 35px; border-bottom: 1px solid #eee; background- ...

随机推荐

  1. CSS中padding、margin两个重要属性的详细介绍及举例说明

    http://www.x6x8.com/IT/199.html 本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, ...

  2. [Git]常用的Git命令行

    Commit的用法 git init [+项目名] git add . (注意这里在add后面的空格和点是不能省略的) git status git commit -m “message”(这里的me ...

  3. Unity3D中使用Projector生成阴影

    在Unity3D中使用Projector实现动态阴影 无意中看见一篇博客叙述使用Projector实现动态阴影可以在移动平台拥有非常好的性能,遂按照其想法实现了一遍,发现其中竟有许多细节,写下这篇博客 ...

  4. 2018.4.28 基于java的聊天系统（带完善）

    Java聊天系统 1.Socket类 Socket(InetAddress address, int port) 创建一个流套接字并将其连接到指定 IP 地址的指定端口号. Socket(String ...

  5. Mac OS X El Capitan系统完整性保护System Integrity Protection (SIP)

    http://blog.csdn.net/yulimin/article/details/49992031 引言:前段时间经历了XCode编译器代码被注入的事件后,这次 Mac OS X El Cap ...

  6. Python——函数的高级应用

    一.函数赋值给变量 函数也是对象,也可以赋值给变量,当把函数赋值给变量后,可以通过变量调用函数. 例: def test(x,y): return x * y # 把函数赋值给变量 a = test ...

  7. string 空值

    string str; string mystr = ""; 则 str == mystr;

  8. iOS 绘制1像素的线

    一.Point Vs Pixel iOS中当我们使用Quartz,UIKit,CoreAnimation等框架时,所有的坐标系统采用Point来衡量.系统在实际渲染到设置时会帮助我们处理Point到P ...

  9. Confirm the Ending--freecodecamp算法题目

    Confirm the Ending(检查字符串结尾) 要求 判断一个字符串(str)是否以指定的字符串(target)结尾. 如果是,返回true;如果不是,返回false. 思路 利用.repla ...

  10. pandas中的随机排序和抽样

    1.随机重排序 使用take()随机排序 如: df.take([54])   #采取索引为54的数据 可以借助np.random.permutation()函数随机排序 permutation()函 ...