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();
}
});