法一：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>iframe 自适应高度[ff,ie下大同小异]</title>
<script language="javascript" type="text/javascript">
function dyniframesize(down) {
var pTar = null;
if (document.getElementById) {
pTar = document.getElementById(down);
} else {
eval('pTar = ' + down + ';');
}
if (pTar && !window.opera) {
//begin resizing iframe
pTar.style.display = "block"
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight + 20;
pTar.width = pTar.contentDocument.body.scrollWidth + 20;
} else if (pTar.Document && pTar.Document.body.scrollHeight) {
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
pTar.width = pTar.Document.body.scrollWidth;
}
}
}
</script>
</head>
<body>
<!-- 头部iframe -->
<div style="width: 100%; border: 0px solid #3C72B0; background-image: url(../images/head_bg.png); background-repeat: repeat-x;">
<iframe src="top.html" width="100%"></iframe>
</div>
<!-- 中间左右侧iframe -->
<div style="border: #000000 0px solid; float: left; width: 100%;">
<div style="float: left; width: 20%;">
<iframe src="left.html" scrolling="no" height="100%" id="ifm0"
name="ifm0" onload="javascript:dyniframesize('ifm0');" width="100%"></iframe>
</div>
<div style="float: left; width: 80%;">
<iframe src="right.html" scrolling="no" id="ifm"
name="ifm" onload="javascript:dyniframesize('ifm');" width="100%"></iframe>
</div>
</div>
<!-- 尾部iframe -->
<div style="height: 120px; width: 100%; background-color: #FF0000; float: left">
<iframe src="bottom.html" width="100%"></iframe>
</div>
</body>
</html>
分享到：
相关推荐
标题提到的“iframe自动适应高度（完美自适应高度嵌套代码）”提供了一个解决方案，它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度，包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...
然而，`<iframe>`的高度自适应问题常常困扰着开发者，尤其是当`<iframe>`内部的内容动态加载或者变化时，如何让`<iframe>`自动调整其高度以适应内容，而不会导致滚动条溢出或内容被截断，成为了一个常见需求。...
【标题】：“iframe自适应高度.rar”涉及到的关键知识点主要集中在如何使用JavaScript来处理网页中iframe元素的高度自适应问题。在Web开发中，iframe（Inline Frame）是一种内联框架，常用于在同一个HTML文档中嵌入...
本案例的目标是实现`iframe`自适应高度的功能，并确保其能够在不同的浏览器环境下正常工作。这里所说的“多种浏览器”包括但不限于Chrome、Firefox、Safari、Edge以及Internet Explorer等主流浏览器。此外，该解决...
多层嵌套iframe 自适应高度的解决方法
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
"再谈iframe自适应高度"这个主题，关注的是如何使iframe的内容区域根据所加载页面的高度自动调整，以避免滚动条出现或者内容被截断的问题。在网页设计中，尤其是在构建响应式布局时，这是一个非常关键的优化点。 1....
### iframe自适应高度和宽度详解 在Web开发中，`iframe`（Inline Frame）是一种常用的HTML元素，用于在当前页面内嵌入另一个HTML文档。它能够实现页面内部局部刷新的效果，广泛应用于各种复杂的网页布局中。然而，...
本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案，确保在各种主流浏览器中都能正常工作。 首先，理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性，用于指定要加载的...
因为有一个项目要用到iframe自适应高度，网上搜索了以下结果无数，不过看来看去都是那几个，而且基本都测试了一遍，所说的兼容根本不是那么回事，要不IE不正常，要不其他浏览器显示不正常，最后无奈，综合网上的方法...
iFrame 自适应高度（兼容所有主浏览器） iFrame 自适应高度是前端开发中常见的问题，很多开发者在搜索引擎中搜索相关解决方案，但大多数文章只能解决静态高度的问题，而忽视了 JS 操作 DOM 之后的动态同步问题。...
iFrame自适应高度兼容各主流浏览器 iFrame自适应高度是指在网页中嵌入iFrame时，使其高度能够自动适应其内容的高度，从而避免了出现滚动条的问题。下面是实现iFrame自适应高度的方法和相关知识点。 知识点1：...
总之，“jquery对iframe自适应高度插件”是解决`iframe`高度自适应问题的一个强大工具，它的易用性和效率使得它成为开发者处理`iframe`高度问题的首选方案。通过合理利用这个插件，可以避免手动计算和调整`iframe`...
### iframe自适应高度实现方法详解 在网页设计与开发中，`iframe`（Inline Frame）是一种常用的HTML元素，用于在当前文档中嵌入另一个HTML文档。然而，在实际应用过程中，经常会遇到`iframe`内容高度固定导致页面...
`iframe`的自适应高度是一项关键技术，它确保了嵌入的内容能够完全显示，避免滚动条的出现，从而提供更好的用户体验。 `iframe`的基本语法如下： ```html <iframe src=...
在网页设计中，使iframe具有自适应高度是非常重要的，尤其是在响应式设计和动态内容加载的场景下。自适应高度意味着iframe的高度会根据其内部内容的大小自动调整，从而避免了不必要的滚动条出现，或者因内容过多而...
### iframe自适应高度详解 在网页开发中，`iframe`是一种常用的技术，用于在一个HTML页面中嵌入另一个HTML页面。然而，默认情况下，`iframe`的高度是固定的，这可能导致页面布局问题，尤其是当嵌入的内容高度不确定...
本篇将深入探讨如何实现`iframe`自适应高度的简单解决办法。 首先，我们需要了解`iframe`的基本结构。在HTML中，创建一个`iframe`标签如下： ```html <iframe src=...
### iframe自适应高度（DOM动态操作） #### 概述 在网页开发中，`iframe`是一种常用的技术，用于在一个HTML页面中嵌入另一个HTML页面。然而，在实际应用中经常会遇到一个问题：即`iframe`的高度与内嵌页面的实际...
iframe自适应高度：根据屏幕的高度，自动增减。包括适应浏览器高度的改变。