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- ...
随机推荐
- 为管理复杂组件状态困扰？试试 vue 简单状态管理 Store 模式【转】
https://juejin.im/post/5cd50849f265da03a54c3877 在 vue 中,通信有几种形式: 父子组件 emit/on vuex 中共享 state 跨组件 Eve ...
- 爬虫1_python2
# -*- coding: UTF-8 -*- # python2爬虫 import urllib f = urllib.urlopen("http://www.itcast.cn/&quo ...
- Sublime +Markdown+OmniMarkupPreviewer 搭建实时预览的markdown编辑器
浏览器实时预览 <meta http-equiv="refresh" content="0.1"> auto save 的配置 {"aut ...
- python 函数内使用全局变量
x = def change_global(): global x x = x + change_global() print(x) result: 2
- bootstrap 警告(Alerts)
本章将讲解警告(Alerts)以及bootstrap所提供的用于警告的class类.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添 ...
- cocos2d-x中解决暂停并保存画面和开始的功能
1.调用所有对象的pauseSchedulerAndActions().太麻烦,不太现实,而且有很多对象不易获取. 2.CCDirector::sharedirector()->pause(). ...
- C# 调用腾讯地图WebService API获取距离(一对多)
官方文档地址:https://lbs.qq.com/webservice_v1/guide-distance.html 代码: /// <summary> /// 获取距离最近的点的经纬度 ...
- data命令详解
Linux date命令的用法 在linux shell编程中,经常用到日期的加减运算 以前都是自己通过expr函数计算,很麻烦 其实date命令本身提供了日期的加减运算 非常方便.例如:得到昨天的时 ...
- css3 设置滚动条的样式
::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-th ...
- 微信小程序传值取值的几种方法
一,列表index下的取值 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可 1.1生成值 < ...