div固定在屏幕底部
项目中需要实现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固定在屏幕底部的更多相关文章
- 返回顶部的功能 div固定在页面位置不变
1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...
- 让div固定在顶部不随滚动条滚动
让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- div 固定宽高 水平垂直居中方法
div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...
- 内容高度小于窗口高度时版权div固定在底部
<!doctype html><html><head><meta charset="utf-8"><title>文档内容 ...
- 让div固定在顶部不随滚动条滚动【转】
让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- div固定顶部和底部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS Div固定在网页顶部、底部、左侧、右侧
Div固定在网页顶部 .header { width:100%; height:80px; background-color:#FAFAFA; position:fixed; top:; left:; ...
- bootstrap div 固定
div固定在顶部样式: .navbar-fixed-top div固定在底部样式 .navbar-fixed-bottom
- div固定在浏览器的最上方，不随滚动条滚动
#topDIV { position: fixed; ; ; width: 100%; height: 35px; border-bottom: 1px solid #eee; background- ...
随机推荐
- pc端常见布局---水平居中布局 单元素不定宽度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Vue -- 仿照商城分类竖向侧边栏点击居中效果（横向原理相同）
github代码地址 效果图
- (转发)IOS高级开发～Runtime（二）
一些公用类: @interface ClassCustomClass :NSObject{ NSString *varTest1; NSString *varTest2; NSString *varT ...
- logback写日志
https://blog.csdn.net/u010128608/article/details/76618263 https://blog.csdn.net/zhuyucheng123/articl ...
- 【线程池】ExecutorService与quartz搭配出现的问题
问题描述: 使用quartz定时推送微信公众号模板消息,一分钟推送一次,定时器里面使用了一个ExecutorService线程池,大小为5个. 批量获取数据之后,全部数据都被分配到n/5的线程池里面等 ...
- 分享几个简单的技巧让你的 vue.js 代码更优雅
1. watch 与 computed 的巧妙结合 一个简单的列表页面. 你可能会这么做: created(){ this.fetchData() }, watch: { keyword(){ thi ...
- Linux 用户管理（三）
一.userdel --delete a user account and related files -r --remove 删除用户及家目录 二.id --print real and effe ...
- Thinkphp5 同时连接两个库
新建api/user.php <?php /** * Created by PhpStorm. * User: Administrator * Date: 2018/8/25 * Time: 1 ...
- GoF23种设计模式之行为型模式之观察者模式
一.概述 定义对象之间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新.二.适用性1.当一个抽象模型有两个方面,其中一个方面依赖于另一方面的时 ...
- w3resource_MySQL练习：Basic_select_statement
w3resource_MySQL练习题:Basic_select_statement 1. Write a query to display the names (first_name, last_n ...