方法一:

通过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. C# 获取字符串字节长度

    一.C# 获取字符串字节长度 1.在C# 语言中使用string 字符串Unicode 编码 2.在C#语言中常用汉字 占 3个字节 方式1:使用默认编码类获取字节长度 Console.WriteLi ...

  2. linux中查看软件文件安装路径

    在linux中文件与软件一般都是安装在到/usr/share和/usr/local中了,如果我们需要查看软件安装路径linux为我们提供了查看命令,whereis 就可以帮我查找文件安装路径在哪里了 ...

  3. (2):Mysql 查看、创建、更改 数据库和表

    一.一探究竟 我想看看有多少个数据库,有多少个表,以及表里有啥东西.那么你可以这样: 图形界面: 命令: 查看多少个数据库:注意 后面带s #查看 SHOW DATABASES; #查看表 USE b ...

  4. 什么?又是404!趣图助你理解HTTP状态码~

    HTTP状态码(一):   注释: 301—永久移动.被请求的资源已被永久移动位置: 302—请求的资源现在临时从不同的 URI 响应请求: 305—使用代理.被请求的资源必须通过指定的代理才能被访问 ...

  5. 解决python3环境下twisted安装问题

    twisted的安装经常会出问题,提示: 1.twisted错误,报Unable to find vcvarsall.bat2.等 解决办法: 1.安装wheel,命令:pip install whe ...

  6. IDC机房机器日志采集配置

    以机器 gpu-server-011  为例: 机房机器添加AliUids操作 [root@gpu-server-011 ~]# mkdir -p /etc/ilogtail/users/ [root ...

  7. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

  8. OpenLayers4地图实例-功能齐全

    网址:http://api.rivermap.cn/openlayers4/map.min.html 标注 工具

  9. Effective Java 第三版——62. 当有其他更合适的类型时就不用字符串

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  10. 【转载】linux系统时间自动同步:ntp

    NTP基本介绍 NTP(Network TimeProtocol,网络时间协议),使用来使本地机器与服务端机器时间保持同步的一种协议.如果我们只有一台机器那么只需要安装NTP客户端ntpdate这个包 ...