实现不同分辨率、不同浏览器下高度自适应、iframe高度自适应
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<style type="text/css">
/*
* 设置高度自适应,让在普通分辨率下和大屏分辨下,都能铺满屏。
1.设置最外层html的 font-size: 12px;
*/
html,body{font-family: "微软雅黑";font-size: 12px;width: 99%;height: 100%; min-width: 1340px; background-color: #04101E;margin: 0 auto;}
/*
2.高度用rem单位。
最外层html的 font-size: 12px;如果div的height是24px,那用24/12=2rem;相当于1rem=12px;
*/
.div1,.div2,.div3{
width: 100%;
height: 18.33rem; }
.div1{background-color:#ff1aaf ;}
.div2{background-color:#AA86E6 ;}
.div3{background-color:#189189 ;}
</style>
</head>
<body>
<div class="div1">撑起div的高度</div>
<div class="div2">撑起div的高度</div>
<div class="div3">撑起div的高度</div>
</body>
</html>
js:
// 放到头部(初始化位置
$(document).ready(function(){
setHeight();
$(window).resize(function(){
setHeight();
});
}) function setHeight(){
//alert("12");
var sWidth=document.documentElement.clientWidth;
var sHeight=document.documentElement.clientHeight;
if(sWidth>1366){
$("html").css("font-size",sWidth/1366*12+"px");
return;
}
if(sHeight>768){
$("html").css("font-size",sHeight/768*12+"px");
}
};
一、若使用iframe嵌入页面(跨域),自适应高度。
问题:初始化调用iframeHeight();同域有效。但对于iframe(class="iframeClass")里嵌入的页面还是无法自适应高度,不在同浏览器或分辨率下,下方出现白色空白。
解决方法:
①.主页面A.html。嵌入页面B.html
②.对A.html里任意一菜单class,统一绑定iframeHeight();。内容区iframe嵌入的页面能够自适应页面高度,空白处消失。内容超出自动出滚动条。
③.隐藏A.html里最外层滚动条。只显示iframe下的滚动条。
④.单位:宽100%,高rem。
$(document).ready(function(){
$(window).resize(function(){
iframeHeight();
});
iframeHeight();
}); function iframeHeight(){
var sHeight=document.documentElement.clientHeight;
$(".iframeClass").css("height",(sHeight/12-11.09)+"rem");
};
// 获得总可视区域的高度/12-head块占了11.09rem的高
如:
$(document).ready(function(){
$(document).on("click","#menus a",function(){
iframeHeight();
}); $(window).resize(function(){
iframeHeight();
});
iframeHeight();
});
二、设置点击某一处,head块隐藏。
var sHeight=document.documentElement.clientHeight;
$(".iframeClass").css("height",(sHeight-26)/12+"rem");
// 获得总可视区域的高度-标签页块占了26px的高后,除以12
如:
$("控制head隐藏按钮").click(function(){
if($("head块").is(":visible")){
$("head块").hide();
$(this).attr("title","显示head块");
var sHeight=document.documentElement.clientHeight;
$(".iframeClass").css("height",(sHeight-26)/12+"rem"); }else{
$("head块").show();
$(this).attr("title","隐藏head块");
// $(".iframeClass").css("height","41rem");
iframeHeight();
}
});
实现不同分辨率、不同浏览器下高度自适应、iframe高度自适应的更多相关文章
- 判断图片加载完成,自适应iframe高度
在做RSS订阅的时候遇到这样一个问题:点击文章标题时,弹出文章的详细界面.本来打算直接用弹出div层来显示文章的内容,但是设置div的overflow:scroll滚动条不好看,还有就是在androi ...
- js获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度
摘自:http://blog.csdn.net/kongjiea/article/details/38870399 1.在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测 ...
- 8.14 右键自定义菜单 更加iframe 内容高度调整 iframe高度 js定时
<div class="main_contain" id="z_div" style="position: relative;"> ...
- 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- (转)iFrame高度自适应
第一种方法:代码简单,兼容性还可以,大家可以先测试下: function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...
- Iframe高度自适应(兼容IEFirefox、同域跨域)
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
- Iframe高度自适应(兼容IE/Firefox、同域/跨域)
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
- jQuery解决iframe高度自适应代码
网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试. 代码如下: <scr ...
- JS 中根据iframe子页面自动iframe高度
注意:为使页面有更好的兼容性,在使用以下代码前,请将aspx页中头部的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional ...
随机推荐
- 64位内核开发第四讲,查看SSDT表与showSSDT表
目录 SSDt表与ShadowSSDT表的查看. 一丶SSDT表 1.什么是SSDT表 2.查看步骤 二丶ShadowSSDT表 1.什么是ShadowSSDT表 2.如何查看. 三丶工具介绍 SSD ...
- P3719 [AHOI2017初中组]rexp——递归模拟
P3719 [AHOI2017初中组]rexp 没有什么算法的题做起来真不适应,这道题深深讽刺了我想用栈维护匹配括号个数的想法: 递归解决就行了: 时刻注意函数返回值是什么,边界条件是什么: #inc ...
- ICEM-hollow
原视频下载地址: http://yunpan.cn/cumt7U7ufYfA3 访问密码 a46d
- 第06组 团队Git现场编程实战
一.组员职责分工 队员姓名 主要分工 朱庆章 测评福州最受欢迎的商圈(参考人气) 陈梦雪 测评福州最受欢迎的商圈(参考人气) 关文涛 分别测评福州人均消费50以下,50-100.100-200.200 ...
- 使用清华源 tensorflow 安装
1. 超级权限打开cmd.exe 2. pip install --upgrade setuptools 3. pip install -U --ignore-installed wrapt enu ...
- gogs 实现webhook钩子(php接口形式)
1.概要流程 2.准备工作 gogs服务器 linux网站服务器(宝塔) 本地客户端 3.编写钩子访问的接口 在public下新建githook.php文件,代码如下: <?php $cmd = ...
- Grafana 在添加邮件和钉钉报警之后不报警的原因是没有重启grafana 不生效重启。
即使在grafana页面上面添加也需要重启.配置邮件配置文件更需要重启. systemctl restart grafana-server.service
- SQL Server 查找空值
需要查找某一列为空的数据 )NULL不能用 “=”运算符 )NULL不支持+-*/ <> )不同的函数对NULL的支持不一样,使用前要测试,不能靠猜,不能凭经验
- idea 配置文件中文显示问题
配置文件中的中文,有时候会显示异常,因此需要修改文件编码格式修改.下面红框位置需要勾选上.
- 重启WMS服务
一.重启API服务 查看进程ps ef|grep java 进入目录 cd /usr/local/tomcat-api/bin ./shutdown.sh ps –ef|grep 查看服务是否真的停止 ...