方法一:

通过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. 资源贴——以备时时查询用

    目录区 AI教程   AI教程 1.AI教程!教你绘制小清新巴士   2.AI教程!如何使用基础图形来绘制消防插画   3.AI教程!教你绘制秋日插画   4.AI教程!教你制作色彩分明的街边场景插画 ...

  2. python接口自动化测试(二)-requests.get()

    环境搭建好后,接下来我们先来了解一下requests的一些简单使用,主要包括: requests常用请求方法使用,包括:get,post requests库中的Session.Cookie的使用 其它 ...

  3. C# System.IO.StreamReader

    实现一个 TextReader,使其以一种特定的编码从字节流中读取字符. using System; using System.IO; class Test { public static void ...

  4. masstree Seastar

    masstree  Seastar 线程锁竞争和切换的开销几乎为0,代码也不用考虑多线程竞争,逻辑大大减化:此外Niagara是一个全异步执行引擎,采用了基于future,promise和contin ...

  5. chrome浏览器解决跨域问题

    windows: 右击chrome图标 选择属性 快捷方式 在目标末尾位置,空格,输入--args --disable-web-security --user-data-dir 例如:"C: ...

  6. Python装饰器用法

    在Python中,装饰器一般用来修饰函数,实现公共功能,达到代码复用的目的.在函数定义前加上@xxxx,然后函数就注入了某些行为,很神奇!然而,这只是语法糖而已. 场景 假设,有一些工作函数,用来对数 ...

  7. Hadoop相关基础知识

    因为个人对这块的知识也不熟悉,所以大多内容来源于网络. 1.      Hadoop项目框架 2.      Hadoop Hadoop是一个由Apache基金会所开发的分布式系统基础架构. 用户可以 ...

  8. Gluon Datasets and DataLoader

    mxnet.recordio MXRecordIO Reads/writes RecordIO data format, supporting sequential read and write. r ...

  9. Centos7下安装Oracle11g r2图形化界面数据库

    我的centos7是在VMware下安装的,安装Oracle安装了好久好久,最开始的时候在网上找的两个文章,按照步骤装,有一篇写着装的时候有灰色的竖线,直接按space键或者鼠标右键closed关闭掉 ...

  10. docker被屏蔽后下载方法

    docker镜像默认的官网上传平台:https://hub.docker.com/,k8s运行时需要从google下载镜像(k8s.gcr.io),但该网被屏蔽了,怎样下载到所需镜像呢? 1. 可在知 ...