方法一:

通过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. FPGA基础之逻辑单元(LE or LC)的基本结构

    原帖地址: https://blog.csdn.net/a8039974/article/details/51706906/ 逻辑单元在FPGA器件内部,是完成用户逻辑的最小单元.逻辑单元在ALTER ...

  2. CentOS ISO版本区别

    CentOS6 CentOS7 介绍 区别 bin-DVD.iso bin-DVD.iso 系统标准安装包 bin DVD本身包含了软件,不需要依赖于网络经行安装. bin-DVD2.iso Ever ...

  3. mac下host配置 + mac修改了环境变量却不生效:zsh: command not found: xxx

    https://blog.csdn.net/hlllmr1314/article/details/52228672 在/etc/profile中配置了go语言环境变量: export GOROOT=/ ...

  4. JS实现网站内容的禁止复制和粘贴、另存为

    1.使右键和复制失效方法1:在网页中加入以下代码: <script language="Javascript"> document.oncontextmenu=new  ...

  5. Android设置屏幕旋转后保存数据

    1.onCreate()方法中最后判断需要保存的状态值 if(savedInstanceState != null){ mCurrentIndex = savedInstanceState.getIn ...

  6. Win10系统的SurfacePro4的启动菜单太多怎么管理,UEFI的启动菜单如何编辑

    有时候多增加了一些硬盘版的PE,会出现下面这种问题,启动项目太多又删不掉(如果你硬盘版的PE修改了文件位置,这个选项还进不去)   关机之后,按开机键和音量+,进入Surface的启动菜单,直接删除原 ...

  7. linux 命令之 dmidecode

    Dmidecode 这款软件同意你在 Linux 系统下获取有关硬件方面的信息.Dmidecode 遵循 SMBIOS/DMI 标准.其输出的信息包含 BIOS.系统.主板.处理器.内存.缓存等等. ...

  8. EAS开发环境搭建.

    一:EAS开发环境安装 解压EAS服务器安装包到E盘即可,内含BOS开发环境. 二:EAS客户端安装 EAS8.0.exe安装到D盘,这是客户端. 三:远程数据库 使用远程运维系统,登陆数据库.

  9. EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射(一) c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  10. vim资源

    1.http://vimcasts.org vim技巧,还有一个高达120美元的课程 目前,正在看http://vimcasts.org/blog/2013/02/habit-breaking-hab ...