方法一:

通过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. Docker 下载镜像慢的问题解决方法

    让你火箭般的速度下载docker镜像! 的冷漠度 百家号17-11-1713:09 因为有墙的原因所以在国内下载docker镜像的速度非常慢,有时候是几kb每秒,那个蛋疼的等待,真是谁等谁知道!下面我 ...

  2. ionic BUILD FAILED

    BUILD FAILED Total time: 24.572 secs FAILURE: Build failed with an exception. What went wrong: Execu ...

  3. Eslint 规则说明

    "no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器&qu ...

  4. C#面试题(转载) SQL Server 数据库基础笔记分享(下) SQL Server 数据库基础笔记分享(上) Asp.Net MVC4中的全局过滤器 C#语法——泛型的多种应用

    C#面试题(转载) 原文地址:100道C#面试题(.net开发人员必备)  https://blog.csdn.net/u013519551/article/details/51220841 1. . ...

  5. Android中APK签名工具之jarsigner和apksigner详解

    一.工具介绍 jarsigner是JDK提供的针对jar包签名的通用工具, 位于JDK/bin/jarsigner.exe apksigner是Google官方提供的针对Android apk签名及验 ...

  6. Asp.Net WebApi 跨域设置

    跨越问题主要发生在客户端ajax请求时,为了安全设置,默认webapi是不允许ajax跨越请求的,不过有方法设置让支持跨越,我说说最常见的两种方法 一.jquery jsonp 缺点:JSONP也有局 ...

  7. 利用Layer组件弹出多个对话框(非嵌套)与关闭及刷新

    页面A中弹出页面B,在页面B中弹出页面C,在layer做嵌套ifframe弹出时会遇到C页面被嵌套在B页面中,如果C尺寸大于B,则C将不能显示完整.这个时候可以考虑B,C页面均由A页面弹出从而避免嵌套 ...

  8. JSP之连接SQL Server

    1.在SQL Server中启用sa(请参考本人博客:http://www.cnblogs.com/zhouhb/archive/2011/02/15/1955324.html)2.在SQL Serv ...

  9. VirtualBox通过Host-Only网络连接方式实现宿主机与虚拟机通信

    适用情况 (1)没有联网, 不插网线 (2)宿主机直接连接宽带(无路由器) 情景: 宿主机 Windows 7 虚拟机 Windows XP 虚拟机安装了SQLServer2005,宿主机想连接使用虚 ...

  10. gsoap内存管理与释放

    (一)gSoap客户端调用WebService完成后注意内存释放顺序 //Soap资源清理 soap_destroy(soap_sp.get()); //清理反序列化的类实例 soap_end(soa ...