项目中需要实现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. iOS Automated Tests with UIAutomation

    参照:http://blog.manbolo.com/2012/04/08/ios-automated-tests-with-uiautomation#1 UI Automation JavaScri ...

  2. 禁止MySQL开机自动启动的方法

    这几天发现电脑卡机变慢了,还有一些卡,发现每次开机MySQL都会自动启动(明明我安装的时候选择了不开机自启,任务管理器启动列表中也没有,但就是自启了...) 1.打开服务列表 有两种方法,一是快捷键 ...

  3. 我的offer之路（一）

    目录 1.职业规划. 2.刷题. 3.看书. <剑指offer> <数据结构算法与应用:C++语言描述 > <Effective C++> <C与指针> ...

  4. Codevs3324 新斯诺克

    题目描述 Description 斯诺克又称英式台球,是一种流行的台球运动.在球桌上,台面四角以及两长边中心位置各有一个球洞,使用的球分别为1 个白球,15 个红球和6 个彩球(黄.绿.棕.蓝.粉红. ...

  5. SAP HANA

    DROP PROCEDURE ""."ZCONCAT_EKKO_EBN"; CREATE PROCEDURE ""."ZCONCA ...

  6. 分割catalina.out 每天生成一个文件

    1. touch xxx(文件名字).sh 2.     vim xxx.sh 写入  ----------------------- #!/bin/sh cd `dirname $0`pwdd=`d ...

  7. php进行文件的强制下载

    浏览器下载文件,例如在浏览器中可以直接打开的文件(.gif /.txt等).在进行文件下载操作时,默认是通过浏览器直接打开,而不是下载保存文件.并且通过这种方法下载文件可以不暴漏下载文件所在的路径,可 ...

  8. 笔记--Day2--python基础2

    一.鸡汤 1.提高自我修养 2.人丑就要多读书 3.多走走,开拓眼界 二.目录: 1.列表.元组操作 2.字符串操作 3.字典操作 dict是无序的 key必须是唯一的 4.集合操作 集合是一个无序的 ...

  9. GTX 750等低配显卡如何玩转Deepfakes？

    这里说的Deepfakes软件还是DeepFaceLab,人工智能换脸,是使用深度学习方法来实现的.而深度学习程序对电脑配置要求是非常高的,尤其是跑模型这个环节.很多低配电脑,根本就跑步起来.比如像G ...

  10. 【网络基础】【TCP/IP】私有IP地址段

    私有IP地址段 Class A:10.0.0.0    - 10.255.255.255 Class B:172.16.0.0  - 172.31.255.255 Class C:192.168.0. ...