CSS div 高度满屏
方法一:
通过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 高度满屏的更多相关文章
- div 自动满屏
通常通过jq来做,类似这样: $('#navigation').css({ height: $(window).innerHeight() }); css3后,只需要用 下面这段样式即可 #navig ...
- css 让内容满屏居中不变形
.selector { position: fixed; width: 100%; height: 100%; background-image: url(path); background-repe ...
- css广告弹窗满屏跑
window.onload=function(){ //广告滚动 var oneInner = $('#divid')[0]; //定时器 var a1a = setInterval(moves,10 ...
- CSS(十三).高度如何铺满全屏
该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种 ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- CSS+DIV两栏式全屏布局
在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- CSS布局:div高度随窗口变化而变化(BUG会有滚动条)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS未知div高度垂直居中代码_层和布局特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯CSS实现Div高度根据自适应宽度(百分百调整)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- python接口自动化测试(五)-其它(认证&代理&超时配置)
有了前面几节的介绍,基本的接口测试是可以满足了.本节一些其它的高级技巧: 一.认证 1.基本认证: # -*- coding:utf-8 -*- import requests url = " ...
- grid - 隐式网格
当网格项目确认在显式网格之外时就会创建隐性网格,当没有足够的空间或者显式的网格轨道来设置网格项目,此时网格项目就会自动创建隐式网格. 隐式网格可以定义:grid-auto-rows.grid-auto ...
- Docker中部署Mysql5.7和DbAdmin的docker-compose.yml
一.简述 本文讲Docker通过docker-compose.yml部署Mysql5.7和dbAdmin的方法. 二.文件 1.docker-compose.yml内容如下: version: ' s ...
- Could not parse multipart servlet request; nested exception is org.apache.commons.fileupload.FileUploadBase$IOFileUploadException: Processing of multipart/form-data request failed.
org.springframework.web.multipart.MultipartException: Could not parse multipart servlet request; nes ...
- Xtrabackup的安装
一.Installing Percona XtraBackup from Percona yum repository 添加源 yum install http://www.percona.com/d ...
- springboot配置idea 热部署
背景: 在开发中,当我们修改代码之后,每次都要重新启动,很是浪费时间,在springboot中就有一种热部署方式,可以实现想要修改不需要每次都重新启动,保存即可生效 用法: 一.maven 添加 ...
- 关于python中pika模块的问题
工作中经常用到rabbitmq,而用的语言主要是python,所以也就经常会用到python中的pika模块,但是这个模块的使用,也给我带了很多问题,这里整理一下关于这个模块我在使用过程的改变历程已经 ...
- Atitit 如何创新 创新只有在两种条件下发生:自由、效率。
Atitit 如何创新 创新只有在两种条件下发生:自由.效率. 创新是如何发生的呢? 创新只有在两种条件下发生:自由.效率.在自由的环境下,对效率的追逐等于创新.如果你不自由,你的思想不够开阔,你脑洞 ...
- zookeeper入门及使用(二)- 状态查看
查看服务的角色,看Mode字段,有follower及leader [root@c7bit1 bin]# echo stat | nc 127.0.0.1 2181 Zookeeper version: ...
- HTTP 07 追加协议与 Ajax
Ajax 解决方法 是一种有效的利用 JavaScript 和 DOM 的操作, 以达到局部Web 页面替换加载异步的通信手段.以达到局部web页面替换加载异步通信手段.和以前的同步通信相比, 由于它 ...