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- ...
随机推荐
- ABAP system landscape和vue项目webpack构建的最佳实践
基于Netweaver的ABAP transport route一般都有dev,test和prod三种类型的系统. 而Vue前端项目的webpack build设置也类似. 以SAP成都研究院数字创新 ...
- SAP GUI里Screen Painter的工作原理
我们在SAP GUI里双击一个screen编号: 单击Layout按钮可以打开Screen Painter: 这背后的工作原理是什么? 是这个RFC destination在起作用: Connecti ...
- EF6.0注意事项
EF6 1.必须要添加Entitiframework 2.必须要添加必须要添加Entitiframework.Sqlserver 3.单元测试一定要有配置文件里面一定要有连接字符串和初始化配置文件节点 ...
- HDU 5459 Jesus Is Here (递推，组合数学)
有点麻烦的递推,递推的原则:向小的问题方向分解,注意边界. 字符串的递推式为 定义f为Si中的总方案数 首先可以得到 fi=fi-1+fi-2+组合(si-2,si-1) 然后考虑Si-2和Si-1之 ...
- Kubernetes之pod的属性
属性名称 取值类型 是否必选 取值说明 version String Required(必) 版本号,例如v1 kind String Required pod m ...
- 2017乌鲁木齐网络赛 j 题
题目连接 : https://nanti.jisuanke.com/t/A1256 Life is a journey, and the road we travel has twists and t ...
- linux目录结构及文件管理
Linux的目录结构: / 根分区 linux文件系统的起点 /bin 普通用户的命令,普通用户能使用 /sbin 管理员使用的命令,只有管理 ...
- idea spring boot启动项目上面有红色叉
一打开IDEA,在启动debug项目有一个红色叉如下图 因为打开项目可以主项目的包没有加载进来,解决办法就是右击项目->maven->Reimport 就搞定了..
- JavaScript实用的例子
---恢复内容开始--- 1.发送验证码 <input id="send" type="button" value="发送验证码"&g ...
- c#中接口、抽象类、继承综合小练习
namespace Test { class Program { static void Main(string[] args) { //作业:橡皮rubber鸭子.木wood鸭子.真实的鸭子real ...