项目中需要实现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. ueditor1_3_6 一点问题记录

    文件:getRemoteImage.php 第49行: if ( !in_array( $fileType , $config[ 'allowFiles' ] ) || stristr( $heads ...

  2. Spark源码分析之-Storage模块

    原文链接:http://jerryshao.me/architecture/2013/10/08/spark-storage-module-analysis/ Background 前段时间琐事颇多, ...

  3. javascript报错：ReferenceError: $ is not defined解决办法

    原因很简单,要么是未导入jquery包,要么是导入的顺序不对. 例如,我在制作Chrome扩展程序时,其中的一块代码如下: 然后运行时报上述错误. 解决方法:我们不难发现script位置有问题,因为$ ...

  4. 响应者链和Hit-Test 机制

    概念: 响应者 : 对用户交互动作事件进行响应的对象.响应者链:成为处理事件的响应者的先后顺序链. 1.Hit-Test 机制 当用户触摸(Touch)屏幕进行交互时,系统首先要找到响应者(Respo ...

  5. JWT的使用流程

    JWT的实现原理 一篇文章告诉你JWT的实现原理 发布于 3 个月前 作者 axetroy 3097 次浏览 来自 分享 在使用 JWT 的时候,有没有想过,为什么我们需要 JWT?以及它的工作原理是 ...

  6. Linux基础学习-网络管理

    Linux系统网络管理NetworkManager 1 启动网络管理服务和开机自启动 在rhel7中网路管理相关命令nmcli,nmtui,nmtui-edit,nm-connection-edito ...

  7. linux关于进程、内存和cpu情况

    1.load average: 2.03, 1.76, 1.80 1分钟.5分钟.15分钟平均负载 2.%Cpu(s):100.0 us, 0.0 sy, 0.0 ni, 0.0 id, 0.0 wa ...

  8. VMware安装Ubuntu配置NAT模式下静态IP，解决访问外网问题

    安装好VMware后,打开网络连接可以看到有VMware Network Adapter VMnet1和VMware Network Adapter VMnet8两个网络适配器,VMnet1是针对桥接 ...

  9. ccf 201712-2 游戏(Python实现)

    一.原题 问题描述 试题编号: 201712-2 试题名称: 游戏 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 有n个小朋友围成一圈玩游戏,小朋友从1至n编号,2号小朋友坐 ...

  10. RSA非对称加密算法实现过程

    RSA非对称加密算法实现过程 非对称加密算法有很多,RSA算法就是其中比较出名的算法之一,下面是具体实现过程 <?php /** */ class Rsa { /** * private key ...