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- ...
随机推荐
- 虚拟机VMware Workstation Pro装Mac遇到的一些问题【总结】
1. 问题:VM找不到Apple Mac X(M)? 解决方法:在网上找unlocker20*下载: 电脑装一个python3版本以下的版本(装python,主要是编译.因为下载的插件是python写 ...
- [uva816]AbbottsRevenge Abbott的复仇(经典迷宫BFS)
这题思路就普通的BFS加上一个维度朝向,主要是要注意输入,输出,以及细节的处理 #include<cstdio> #include<cstring> #include<q ...
- python递归与非递归实现斐波那契数列
1.题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). 递归实现: class Solution(): def Fibnacci(self ...
- win7便笺元数据损坏,最新解决办法
Windows7系统开机时出现“部分便笺的元数据已被破坏,便笺已将其恢复为默认值.”问题,最新解决办法,图文说明,亲测,希望可以帮到大家 工具/原料 Windows7系统 InkObj.dll.T ...
- npm上发布包和删除已发布的npm包(https://www.npmjs.com/)
1.npm上发布自己写的包 2.删除已经发布的包 npm unpublish --force //强制删除,这个是撤销24小时发布的包,有些包发布久了,这个方法不会再管用了. npx force-un ...
- java基础—代理(proxy)
一.代理的概念 动态代理技术是整个java技术中最重要的一个技术,它是学习java框架的基础,不会动态代理技术,那么在学习Spring这些框架时是学不明白的. 动态代理技术就是用来产生一个对象的代理对 ...
- NOIP模拟赛 路面修整
[题目描述] FJ打算好好修一下农场中某条凹凸不平的土路.按奶牛们的要求,修好后的路面高度应当单调上升或单调下降,也就是说,高度上升与高度下降的路段不能同时出现在修好的路中. 整条路被分成了N段,N个 ...
- linux关于任务计划
1.一次性任务计划:at 1)添加 在18:16时候重启服务器 at 18:16 >at init 6 >at ctrl+d2)查看 atq 1 Mon Aug 20 21:09:00 2 ...
- stm32启动地址
理论上,CM3中规定上电后CPU是从0地址开始执行,但是这里中断向量表却被烧写在0x0800 0000地址里(Flash memory启动方式),那启动时不就找不到中断向量表了?既然CM3定下的规矩是 ...
- phpMyAdmin关于PHP 5.5+ is required. Currently installed version is: 5.4.16问题
出现这个提示PHP 5.5+ is required. Currently installed version is: 5.4.16原因可能是: phpmyadmin 版本太新,最小需要php5.5. ...