一 : jquery实现iframe自适应高度
超级简单的方法，也不用写什么判断浏览器高度、宽度啥的。二 : Shrink-to-fit(自适应宽度)
自适应宽度是指当未明确设定容器的宽度（或外边距设为auto）时，在特定的情况下容器的宽度会根据情况自行设定，而设定的结果往往并不是我们想要的。
W3C规范中描述了几种shrink-to-fit的情况
10.3.5 Floating, non-replaced elements
10.3.7 Absolutely positioned, non-replaced elements
10.3.8 Absolutely positioned, replaced elements
10.6.4 Absolutely positioned, non-replaced elements
规范中提到了一个基本概念，我们先来了解一下。
replaced elements & non-replaced elements
css把html元素分为了两类：不可替换元素和可替换元素。
1.可替换元素：
CSS 里，可替换元素是这样一些元素， 其展现不是由CSS来控制的。这些外部元素的展现不依赖于CSS规范。 典型的可替换元素有 img、 object、 video 以及 textarea、input这样的表单元素。 一些元素，比如audio和 canvas ，只在一些特殊情况下是可替换元素。 使用了 CSS content 属性插入的对象被称作匿名的可替换元素。
2.不可替换元素：
反之，则为不可替换元素。
了解了概念后，我们回归主题。shrink-to-fit的情况有多种，这里介绍一种最常见的情况，即不可替代元素浮动时的自适应宽度（Floating, non-replaced elements），听起来有点抽象，但你可能经常遇到。先看一个例子：
html&css
<!DOCTYPE html><html> <style type="text/css"> .outer { width: 800px; background: black; overflow: hidden; } .inner { float: left; background: red; } .sub1 { width: 26%; background: blue; } .sub2 { width: 50%; background: green; } </style><head></head><body> <div> <div> <div> this is 1th line this is 2th line this is 3th line this is 4th line </div> <div> sub2 block </div> </div> </div></body></html>这段样式定义了一个outer容器，背景为黑色且宽度为800px，它里面还有一个内部容器inner，无宽度且左浮动，inner里有两个小块sub1和sub2。
那么问题来了，请问inner，sub1，sub2具体的宽度为多少？
先看效果图再回答：
结果应该会出乎你的意料：inner（红色背景）的宽度并不是outer（黑色背景）的宽度(正常情况下应该可以继承父容器的宽度)，因而sub1和sub2比我们预想的要小得多。
再回答这个问题之前，我们先试图修改一下，看能否从中找到出现这个问题的原因。经过调试，发现两种最简单的方案可以解决这个问题：
1.给inner加宽度width: 100%;
2.取消inner的浮动。
解决后的效果如下：
这的确是我们想要的，可这却巧妙地'躲'过了不可替换元素浮动这个场景。老实讲，我多次遇到过这个场景，但是无非也就是利用上述两个方案去尝试，可并不知晓真正的原因，于是还是啃了一下W3C有关这方面的规范，规范的描述如下：
首先不说英文的问题，单纯的'Roughly'和‘CSS 2.1 does not define ［www.61k.com）the exact algorithm’这两句就让人哭笑不得，然后还给出了shrink-to-fit的一个公式：
min(max(preferred minimum width, available width), preferred width)
呵呵，然并卵啊，天知道这三个值怎么算。
再网上google一下，发现很多人都遇到这个问题，但也是读不懂规范，也有人把上面一段翻译了一下，大家可以看看：
CSS2.1 并未给出 preferred minimum width、available width 和 preferred width 确切算法，通常，将内容中非明确的换行外的其他部分强制不换行来计算 preferred width；反之，尝试将内容尽可能的换行，以得到 preferred minimum width；available width 即该元素的包含块的宽度减去 'margin-left'，'border-left-width'，'padding-left'，'padding-right'，'border-right-width'，'margin-right' 的值以及任何存在的纵向滚动条的宽度。
已被这段翻译绕晕的请举手。。。。。。。。。。。。。
再次回归主题，经过近一个小时的摸索，终于让我把这段难懂的英文捋顺了：
这里有三个参数，分别为：preferred minimum width, available width, preferred width.只需关心preferred width的计算方式即可，preferred width的计算方式如下：
让元素内容强制不换行后的最大宽度即为shrink-to-fit后的宽度
具体拿上面的例子，inner中的sub1的内容由于宽度不够被换行了，将其强制不换行算出的宽度就是inner自适应的宽度(inner本身没设宽度喔～)，如何强制不换行也很简单，慢慢的将sub1的宽度调大，就会发现调至100%时恰好足够用一行来现实其内容，这时内容的宽度就是inner自适应后的宽度。直接上图：
总结：对于浮动或者特殊的定位方式，推荐显式的设置容器宽度，避免出现意想不到的结果
查看Blog原文请戳此处
三 : iframe自适应高度(兼容多种浏览器)
最近些项目遇到用iframe的地方，发现设置的固定高有时不能完全适应项目环境，不是高了就是不够高，在页面里看着很不爽。四 : iframe 自适应大小
前提：
W3C标准：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
全局css：
<style>html,body{height:100%;width:100%}iframe{width:100%}</style>1.首先控制整个窗口的大小，如果变化，要自适应
var originalWidth = document.documentElement.clientWidth;var originalHeight = document.documentElement.clientHeight;window.onresize = function(){var _originalWidth = document.documentElement.clientWidth;var _originalHeight = document.documentElement.clientHeight//if (_originalWidth*_originalHeight!=originalWidth*originalHeight <= originalWidth || _originalHeight <= originalHeight||_originalWidth > originalWidth || _originalHeight > originalHeight){if(_originalWidth*_originalHeight != originalWidth*originalHeight){$("#clientframe").height(_originalHeight-73);//73:前面iframe的高度} originalWidth = _originalWidth; originalHeight = _originalHeight;}2.控制iframe大小 ，如果窗口变化，要自适应
<tr><td width="100%" height="" id="ClientTD" align="top"><iframe src="<%=request.getContextPath()%>/html/com/menu/blank.html" width="100%" height="100%"style="" scrolling="auto" id ="clientframe" frameborder="0" name="clientframe" onload="expression4Firefox(this);getIframeHeight()"></iframe></td></tr>整体页面源码：
<%@ page contentType="text/html;charset=UTF-8" %><%@ taglib uri="/WEB-INF/ecvision.tld" prefix="ecv" %><%@ page import="com.ecv.config.Config,javax.servlet.http.*" %><%@ page import="com.ecv.component.profile.*"%><%@ page import="com.ecv.util.ServerIPUtil" %><% String admType = session.getAttribute("administratorType").toString(); WebManager webMgr = new WebManager(); webMgr.init(session);%><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title><ecv:message path="core.common/label.ecVisionXpressCommerce"/></title><link rel="shortcut icon" href="<%=Config.getHomeURL()%>/img/favicon.ico" type="image/x-icon" /><style>html,body{height:100%;width:100%}iframe{width:100%}</style><script language="javascript" src="<%=Config.getHomeURL()%>/js/compability.js"></script> <script type="text/javascript" src="<%=Config.getHomeURL()%>/js/lib/jquery.js"></script> <script language="javascript" src="<%=Config.getHomeURL()%>/js/expression_compatibility.js"></script><script language="Javascript" >var originalWidth = document.documentElement.clientWidth;var originalHeight = document.documentElement.clientHeight;window.onresize = function(){var _originalWidth = document.documentElement.clientWidth;var _originalHeight = document.documentElement.clientHeight//if (_originalWidth*_originalHeight!=originalWidth*originalHeight <= originalWidth || _originalHeight <= originalHeight||_originalWidth > originalWidth || _originalHeight > originalHeight){if(_originalWidth*_originalHeight != originalWidth*originalHeight){$("#clientframe").height(_originalHeight-73);} originalWidth = _originalWidth; originalHeight = _originalHeight;}function showFolder(){if(window.parent.document.all.folderframe.style.width!="0px"){window.parent.document.all.ClientTD.style.width="100%";window.parent.document.all.FolderTD.style.width = "0%";window.parent.document.all.folderframe.style.width = "0";window.parent.document.all.showhide.src = "<%=Config.getHomeURL()%>/img/showframe.gif";}else{window.parent.document.all.ClientTD.style.width="83%";window.parent.document.all.FolderTD.style.width = "15%";window.parent.document.all.folderframe.style.width = "170";window.parent.document.all.showhide.src = "<%=Config.getHomeURL()%>/img/hideframe.gif";}} var isLoggedOut =true; window.onbeforeunload = function() { var windowLength = window.event.screenX - window.screenLeft;var documentContentLength = document.documentElement.scrollWidth-30; if((windowLength>documentContentLength) && window.event.clientY < 0 || window.event.altKey) { window.event.returnValue=''; isLoggedOut=false; setTimeout("isLoggedOut=true",100); } } window.onunload = function() { if(!isLoggedOut) { if(document.all) { var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } else {var xmlhttp = new XMLHttpRequest(); } if(xmlhttp) { xmlhttp.open("GET","<%=Config.getHomeURL()%>/EndUserLogoutAction.do?pleaseUnlock=ALL"); xmlhttp.send(""); } } } function autoHeight(){var bodyheight=document.body.scrollHeight; var ClientTDHeight = bodyheight - 63;$("#ClientTD").height(ClientTDHeight); } function SetWinHeight(obj){var win=obj;if (document.getElementById){if (win && !window.opera){if (win.contentDocument && win.contentDocument.body.offsetHeight) win.height = win.contentDocument.body.offsetHeight; else if(win.Document && win.Document.body.scrollHeight) win.height = win.Document.body.scrollHeight;}}}function getIframeHeight(){$("#clientframe").height($("#ClientTD").height()-10);} </script></head><body style="overflow: hidden;margin:0px" width="100%" leftMargin="0" rightMargin="0" topMargin="0" bottomMargin="0" onload=""><table border="0" cellPadding=0 cellSpacing=0 bgcolor="#FFFFFF" width="100%" height=100% valign="top" leftMargin="0" rightMargin="0" topMargin="0" bottomMargin="0" ><tr ><%if (com.ecv.config.Config.getConfig("CONFIG","DISPLAY-SERVERIP").equalsIgnoreCase("true")){%><td height="20" colspan=3>Server Address:<%= ServerIPUtil.getServerIP() + " SessionID:" + request.getSession().getId()%><%}%></td></tr><tr><td height="63px" colspan=3 width="100%"><iframe src="<%=Config.getHomeURL()%>/menuAction.do?administratorType=<%=admType%>" align="top" scrolling="no" height="100%" width="100%" frameborder="0" name="menuframe" onload="expression4Firefox(this);"></iframe></td></tr><tr><td width="100%" height="" id="ClientTD" align="top"><iframe src="<%=request.getContextPath()%>/html/com/menu/blank.html" width="100%" height="100%"style="" scrolling="auto" id ="clientframe" frameborder="0" name="clientframe" onload="expression4Firefox(this);getIframeHeight()"></iframe></td></tr></table></body></html>
图片展示：
本文标题：iframe自适应高度-jquery实现iframe自适应高度 61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1