方法一:

通过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. IIS Express ArgumentOutOfRangeException

    重装了VS,调试网站,IIS Express 打开时遇到如下错误. “/”应用程序中的服务器错误. 指定的参数已超出有效值的范围.参数名: site 说明: 执行当前 Web 请求期间,出现未经处理的 ...

  2. 微信小程序开发注意事项总结:上拉加载失效、转义字符等

    1.上拉加载失效 问题背景:部分页面上拉加载失效.当使用flex布局,底部固定,中间采用自适应撑满全屏实现滚动时,发现上拉加载失效,不知道是什么原因. 解决问题: 在小程序中,官方为我们提供了原生的下 ...

  3. 巧用watch命令执行循环操作,来解放我们的双手

    有时候我们需要重复执行某个 命令,观察某个文件和某个结果的变化情况.可以写 脚本去实现这些需求,但是有更简单的方法,本文档要介绍的就是watch 命令. 1. 以固定时间反复执行某个命令 root@j ...

  4. [原创]Delphi XE10 dxLayoutControl 控件应用指南

    DevExpress VCL套件是一套非常强大的界面控件,可惜关于Delphi开发方面的说明太少,有些控件使用起来一头雾水,不知从何下手.本节详细介绍在Delphi Xe10 Seattle中如何利用 ...

  5. 终端下将 man 命令的结果输出到文件保存

    终端下将 man 命令的结果输出到文件保存 在linux或mac下,当我们使用man命令查看某一个命令的详细帮助说明信息时: 可能终端的显示效果不是那么方便: 那么我们可以将man命令的结果输出到tx ...

  6. 使用Git Subtree在多个项目中共用同一个子项目

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/8427796.html 场景一:已有一个大项目,需要把其中一部分内容独立出来作为共用子项目,被其他项目引用 一: ...

  7. MongoDB地理空间数据存储及检索

    目录 1.存入地理数据 GeoJSON数据存入 1.Ponit 点数据 2.LineString 线数据(多段线) 3. Polygon 多边形数据 4.MultiPoint多点.MultiLineS ...

  8. 使用 Nginx 为 Linux 实例绑定多个域名

    KB: 41467 · 更新时间:2018-11-16 20:26:51     Nginx 是一款广泛应用的 Web 服务器,常用于反向代理.负载均衡器以及 HTTP 缓存等.本文以 CentOS ...

  9. window下zookeeper的下载启动和报错等问题

    在使用dubbo等需要用到zookeeper,之前window下本地部署,启动一直有问题,后面折腾了下才部署成功,此次记录下来. 将zookeeper下载之后,解压到指定目录即可,无需安装.例如:解压 ...

  10. Django Http请求生命周期

    day54 请求响应Http 1.发送Http请求 2.服务器接收,根据请求头中的的url在路由关系表中进行匹配(从上到下) 3.匹配成功后,执行指定的views函数 4.业务处理 URL----&g ...