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> ...
随机推荐
- C# 获取字符串字节长度
一.C# 获取字符串字节长度 1.在C# 语言中使用string 字符串Unicode 编码 2.在C#语言中常用汉字 占 3个字节 方式1:使用默认编码类获取字节长度 Console.WriteLi ...
- linux中查看软件文件安装路径
在linux中文件与软件一般都是安装在到/usr/share和/usr/local中了,如果我们需要查看软件安装路径linux为我们提供了查看命令,whereis 就可以帮我查找文件安装路径在哪里了 ...
- (2):Mysql 查看、创建、更改 数据库和表
一.一探究竟 我想看看有多少个数据库,有多少个表,以及表里有啥东西.那么你可以这样: 图形界面: 命令: 查看多少个数据库:注意 后面带s #查看 SHOW DATABASES; #查看表 USE b ...
- 什么?又是404!趣图助你理解HTTP状态码~
HTTP状态码(一): 注释: 301—永久移动.被请求的资源已被永久移动位置: 302—请求的资源现在临时从不同的 URI 响应请求: 305—使用代理.被请求的资源必须通过指定的代理才能被访问 ...
- 解决python3环境下twisted安装问题
twisted的安装经常会出问题,提示: 1.twisted错误,报Unable to find vcvarsall.bat2.等 解决办法: 1.安装wheel,命令:pip install whe ...
- IDC机房机器日志采集配置
以机器 gpu-server-011 为例: 机房机器添加AliUids操作 [root@gpu-server-011 ~]# mkdir -p /etc/ilogtail/users/ [root ...
- 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题
##2017.10.30收集 面试技巧 5.1 面试形式 1) 一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2) 面试官喜欢什么样的人 ü 技术好. ...
- OpenLayers4地图实例-功能齐全
网址:http://api.rivermap.cn/openlayers4/map.min.html 标注 工具
- Effective Java 第三版——62. 当有其他更合适的类型时就不用字符串
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- 【转载】linux系统时间自动同步:ntp
NTP基本介绍 NTP(Network TimeProtocol,网络时间协议),使用来使本地机器与服务端机器时间保持同步的一种协议.如果我们只有一台机器那么只需要安装NTP客户端ntpdate这个包 ...