项目中需要实现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. vmware 虚机NAT模式，局域网可访问

    本地VMware虚拟机,网络模式为NAT,现在需要局域网其他电脑通过ssh连接这台VMware虚拟机 宿主机地址:192.168.3.26 VMware虚拟机地址:192.168.239.137 局域 ...

  2. POJ Charm Bracelet 挑饰品 (常规01背包)

    问题:去珠宝店抢饰品,给出饰品种数n,能带走的重量m,以及每种饰品的重量w与价值v.求能带走的最大量. 思路:常规01背包. #include <iostream> using names ...

  3. UWP开发：存储容器设置&复合设置数据

    有时候为了将应用设置进行分类,需要创建新的容器进行存储应用设置的信息. 1,容器的创建:在一个根容器里嵌套一个新容器 1)首先获取根容器. 2)调用ApplicationDataContainer.C ...

  4. UWP开发：应用设置存储

    应用设置储存指的是保存在应用程序储存区中的键/值对的字典集合,它自动负责序列化对象,并将其保存在应用程序里.以键/值对方式提供一种快速数据访问的方式,主要用于储存一些应用信息. 1,简介 应用设置是W ...

  5. Python3之偏函数

    通过设定参数的默认值,可以降低函数调用的难度.偏函数可以做到这一点 int()函数可以把字符串转换成十进制整数,当传入字符串时,int()默认把字符串为十进制 >>> int('12 ...

  6. Java开发小游戏 用键盘控制精灵在游戏中上下左右跑动 窗体小游戏可打包下载，解压后双击start运行

    package com.swift; import java.awt.Point; import java.awt.event.KeyEvent; import com.rupeng.game.Gam ...

  7. cocos2dx 使用XMLHttpRequest时回调status为0的问题

    今天使用cocos连接http访问时,使用XMLHttpRequest在pc上反问时正常的返回了status=0,但是在android上去返回status是0,看了一下底层代码, 发现status只有 ...

  8. pandas的数据联级

    一．索引的堆(stack) 1.行列的转化: Stack():列转行 Unstack():行转列 Stack对应行, 使用小技巧:使用stack()的时候,level等于哪一个,哪一个就消失,出现在行 ...

  9. ERROR 1045 (28000): Access denied for user 'xxx'@'localhost' (using password: YES) MYSQL 新建用户 无法登录 问题解决方法

    使用mysql ,出现新建账户无法登录问题 查看 user列表中,有部分账户没有设置密码,将全部重新设置一遍密码,然后还是无法登录. 使用命令 update user set password=pas ...

  10. Laravel常用命令

    php artisan make:controller BlogController php artisan make:model Blog