方法一:

通过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 高度满屏的更多相关文章

  1. div 自动满屏

    通常通过jq来做,类似这样: $('#navigation').css({ height: $(window).innerHeight() }); css3后,只需要用 下面这段样式即可 #navig ...

  2. css 让内容满屏居中不变形

    .selector { position: fixed; width: 100%; height: 100%; background-image: url(path); background-repe ...

  3. css广告弹窗满屏跑

    window.onload=function(){ //广告滚动 var oneInner = $('#divid')[0]; //定时器 var a1a = setInterval(moves,10 ...

  4. CSS(十三).高度如何铺满全屏

    该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种 ...

  5. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  6. CSS+DIV两栏式全屏布局

    在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  7. CSS布局:div高度随窗口变化而变化(BUG会有滚动条)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. CSS未知div高度垂直居中代码_层和布局特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 纯CSS实现Div高度根据自适应宽度(百分百调整)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 使用log4net生成日志文件

    (一)使用log4net生成日志文件   1.引入log4net.dll 1.1 Nuget安装 或 http://logging.apache.org/log4net/下载log4net的源代码,编 ...

  2. Glide4 用法总结 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  3. linux:gpg加密和解密

    http://www.bubuko.com/infodetail-650747.html

  4. 【推荐】Hutool 的通用工具类库

    摘自3.1.1版本作者发布原话,当时看到有点说不上的情绪,为作者的坚持.热爱点个赞. 已经想不起来是怎样结识 Hutool 的,但 Hutool 伴随几个项目的推进,获得了同事一致好评. 没经过实践和 ...

  5. iOS 内购讲解

    一.总说内购的内容 1.协议.税务和银行业务 信息填写 2.内购商品的添加 3.添加沙盒测试账号 4.内购代码的具体实现 5.内购的注意事项 二.协议.税务和银行业务 信息填写 2.1.协议.税务和银 ...

  6. P Invoke struct结构

    一.获取Struct CHCNetSDK.NET_DVR_PTZPOS pos = new CameraTest.CHCNetSDK.NET_DVR_PTZPOS(); int size = Mars ...

  7. cpu使用过高的一次处理方法

    1.top查看使用情况 2.查看mysql里的线程,观察是否有长期运行或阻塞的sql: show full processlist 原因找到,处理方法,添加索引,搞定

  8. python 执行sql得到字典格式数据

    本文在提供一种方式,实现执行sql语句 返回字典结果集 # 连接数据库,数据库的,这里使用的setting中的默认设置,在这里不做具体的介绍,不懂的可以百度一下 conn = MySQLdb.conn ...

  9. 【Spark深入学习 -14】Spark应用经验与程序调优

    ----本节内容------- 1.遗留问题解答 2.Spark调优初体验 2.1 利用WebUI分析程序瓶颈 2.2 设置合适的资源 2.3 调整任务的并发度 2.4 修改存储格式 3.Spark调 ...

  10. C语言 goto语句

    /* goto语句 */ #include <stdio.h> #include <stdlib.h> #include <string.h> /* goto语句也 ...