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> ...
随机推荐
- Docker 下载镜像慢的问题解决方法
让你火箭般的速度下载docker镜像! 的冷漠度 百家号17-11-1713:09 因为有墙的原因所以在国内下载docker镜像的速度非常慢,有时候是几kb每秒,那个蛋疼的等待,真是谁等谁知道!下面我 ...
- ionic BUILD FAILED
BUILD FAILED Total time: 24.572 secs FAILURE: Build failed with an exception. What went wrong: Execu ...
- Eslint 规则说明
"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器&qu ...
- C#面试题(转载) SQL Server 数据库基础笔记分享(下) SQL Server 数据库基础笔记分享(上) Asp.Net MVC4中的全局过滤器 C#语法——泛型的多种应用
C#面试题(转载) 原文地址:100道C#面试题(.net开发人员必备) https://blog.csdn.net/u013519551/article/details/51220841 1. . ...
- Android中APK签名工具之jarsigner和apksigner详解
一.工具介绍 jarsigner是JDK提供的针对jar包签名的通用工具, 位于JDK/bin/jarsigner.exe apksigner是Google官方提供的针对Android apk签名及验 ...
- Asp.Net WebApi 跨域设置
跨越问题主要发生在客户端ajax请求时,为了安全设置,默认webapi是不允许ajax跨越请求的,不过有方法设置让支持跨越,我说说最常见的两种方法 一.jquery jsonp 缺点:JSONP也有局 ...
- 利用Layer组件弹出多个对话框(非嵌套)与关闭及刷新
页面A中弹出页面B,在页面B中弹出页面C,在layer做嵌套ifframe弹出时会遇到C页面被嵌套在B页面中,如果C尺寸大于B,则C将不能显示完整.这个时候可以考虑B,C页面均由A页面弹出从而避免嵌套 ...
- JSP之连接SQL Server
1.在SQL Server中启用sa(请参考本人博客:http://www.cnblogs.com/zhouhb/archive/2011/02/15/1955324.html)2.在SQL Serv ...
- VirtualBox通过Host-Only网络连接方式实现宿主机与虚拟机通信
适用情况 (1)没有联网, 不插网线 (2)宿主机直接连接宽带(无路由器) 情景: 宿主机 Windows 7 虚拟机 Windows XP 虚拟机安装了SQLServer2005,宿主机想连接使用虚 ...
- gsoap内存管理与释放
(一)gSoap客户端调用WebService完成后注意内存释放顺序 //Soap资源清理 soap_destroy(soap_sp.get()); //清理反序列化的类实例 soap_end(soa ...