项目中需要实现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. 新手第一天学习 C#语言（进制互换）

    说起来我们对一些陌生或者未知的东西有一些恐惧感,但是又有一些期待,虽然我不确定自己能不能学会这门语言,但是我会尽自己最大的努力学. 我们第一天学的的内容呢,对大多数的人都知道,计算机的语言是二进制,但 ...

  2. coredata 关系的删除规则

    http://blog.csdn.net/Hello_Hwc/article/details/46375517 关系的删除规则-Delete Rule Deny 关系的destination中只要有一 ...

  3. 2406: C语言习题 求n阶勒让德多项式

    2406: C语言习题 求n阶勒让德多项式 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 961  Solved: 570[Submit][Status ...

  4. JavaScript 获取对象中第一个属性

    使用 Object.keys(object) 可以取出属性名为数组,但会打乱顺序 严格意义上对象中是只有映射关系而没有顺序的,但是在存储结构里是有顺序的,如果想获取存储结构里的第一个属性可以使用for ...

  5. WINDOWS-API：关于线程 GetCurrentThread、GetCurrentThreadId、GetCurrentProcess、GetCurrentProcessId

    {返回当前线程的虚拟句柄} GetCurrentThread: THandle; {返回当前线程 ID} GetCurrentThreadId: DWORD; {返回当前进程的虚拟句柄} GetCur ...

  6. linux readahead

    blockdev --getra /dev/sda blockdev --setra 2048 /dev/sda 必须将其写入配置文件/etc/rc.local,否则重启就会失效.[root@loca ...

  7. Ubuntu 下安装WPS

    1.先到wps官网上下载wps的deb包. http://www.wps.cn/product/ 2.我使用的64位的,所以得安装32位兼容包 sudo apt-get install ia32-li ...

  8. Silverlight日记：动态生成DataGrid、行列装换、动态加载控件

    本文主要针对使用DataGrid动态绑定数据对象,并实现行列转换效果. 一,前台绑定 <sdk:DataGrid x:Name="dataGrid2" Style=" ...

  9. Mac下快捷键的符号所对应的按键

  10. mysql 5.7安装密码校验插件validate_password

    在使用服务器插件之前,必须将它们加载到服务器中.MySQL支持在服务器启动和运行时加载插件.还可以在启动时控制加载插件的激活状态,并在运行时卸载它们.在加载插件时,可以从INFORMATION_SCH ...