CSS div 高度满屏
方法一:
通过JQuery,获取窗体的高度,设置给对应的div.代码如下
ht = $(document.body).height();
$("#mDiv").height(ht - );
缺点:由于浏览器是先解析css,后执行JS,导致页面在加载时,mDiv先呈现其原始高度,再变为其全屏效果,div在页面中有一个闪烁
方法二:
通过css的calc()函数实现,其中,vh(1vh being one percent of the view-port's height)
#mDiv {
width: 100%;
min-height: 300px;
/*height:100%;*/
height:calc(100vh - 170px);
}
参考网址:Here
CSS div 高度满屏的更多相关文章
- div 自动满屏
通常通过jq来做,类似这样: $('#navigation').css({ height: $(window).innerHeight() }); css3后,只需要用 下面这段样式即可 #navig ...
- css 让内容满屏居中不变形
.selector { position: fixed; width: 100%; height: 100%; background-image: url(path); background-repe ...
- css广告弹窗满屏跑
window.onload=function(){ //广告滚动 var oneInner = $('#divid')[0]; //定时器 var a1a = setInterval(moves,10 ...
- CSS(十三).高度如何铺满全屏
该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种 ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- CSS+DIV两栏式全屏布局
在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- CSS布局:div高度随窗口变化而变化(BUG会有滚动条)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS未知div高度垂直居中代码_层和布局特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯CSS实现Div高度根据自适应宽度(百分百调整)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- 使用log4net生成日志文件
(一)使用log4net生成日志文件 1.引入log4net.dll 1.1 Nuget安装 或 http://logging.apache.org/log4net/下载log4net的源代码,编 ...
- Glide4 用法总结 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- linux:gpg加密和解密
http://www.bubuko.com/infodetail-650747.html
- 【推荐】Hutool 的通用工具类库
摘自3.1.1版本作者发布原话,当时看到有点说不上的情绪,为作者的坚持.热爱点个赞. 已经想不起来是怎样结识 Hutool 的,但 Hutool 伴随几个项目的推进,获得了同事一致好评. 没经过实践和 ...
- iOS 内购讲解
一.总说内购的内容 1.协议.税务和银行业务 信息填写 2.内购商品的添加 3.添加沙盒测试账号 4.内购代码的具体实现 5.内购的注意事项 二.协议.税务和银行业务 信息填写 2.1.协议.税务和银 ...
- P Invoke struct结构
一.获取Struct CHCNetSDK.NET_DVR_PTZPOS pos = new CameraTest.CHCNetSDK.NET_DVR_PTZPOS(); int size = Mars ...
- cpu使用过高的一次处理方法
1.top查看使用情况 2.查看mysql里的线程,观察是否有长期运行或阻塞的sql: show full processlist 原因找到,处理方法,添加索引,搞定
- python 执行sql得到字典格式数据
本文在提供一种方式,实现执行sql语句 返回字典结果集 # 连接数据库,数据库的,这里使用的setting中的默认设置,在这里不做具体的介绍,不懂的可以百度一下 conn = MySQLdb.conn ...
- 【Spark深入学习 -14】Spark应用经验与程序调优
----本节内容------- 1.遗留问题解答 2.Spark调优初体验 2.1 利用WebUI分析程序瓶颈 2.2 设置合适的资源 2.3 调整任务的并发度 2.4 修改存储格式 3.Spark调 ...
- C语言 goto语句
/* goto语句 */ #include <stdio.h> #include <stdlib.h> #include <string.h> /* goto语句也 ...