<html >
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<style type="text/css">
html body{
width:100%;
height:100%;
padding:0px;
margin:0px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="page">
<div class="content">
<!-- header start-->
<div class="header" id="header-bar">
<!--top bar content--->
</div>
<!--header end -->
<div class="center">
<iframe id="sites-frame" src="http://www.baidu.com/" name="sites-frame" frameborder="0" noresize="noresize" width="100%">
</iframe>
</div>
</div>
</div>
<!--page end -->
s<script type="text/javascript">
//function to fix height of iframe!
var calcHeight = function() {
var headerDimensions = $('#header-bar').height();
$('#sites-frame').height($(window).height() - headerDimensions);
}
$(document).ready(function() {
calcHeight();
});
$(window).resize(function() {
calcHeight();
}).load(function() {
calcHeight();
});
</script>
</body>
</html>
分享到：
相关推荐
1. **CSS属性**：`iframe`的`style`属性可以设置`height`和`width`为`auto`或`100%`，但这种方法通常不足以实现完全自适应，因为浏览器的安全策略会限制跨域访问内容的高度和宽度信息。 2. **JavaScript**：使用...
1. **宽度和高度设置**：确保`iframe`元素的`width`和`height`属性设置正确。可以设置为百分比，使其相对于包含它的容器自适应，如： ```html <iframe src=...
<iframe name="myframe" src="myframe.htm" frameborder="0" scrolling="auto" width="100%" height="100%" onload="document.all['myframe'].style.height = myframe.document.body.scrollHeight + 'px';"> </...
`src`属性指定要加载的URL，`width`和`height`分别定义了iframe的宽度和高度。这些属性对于正确显示内容至关重要，因为如果iframe的尺寸小于嵌入页面的实际尺寸，就会出现显示不全的情况。 为了在`<div>`中嵌套`...
`src`属性用于指定要嵌入的页面URL，`width`和`height`属性分别定义了`<iframe>`的宽度和高度。`scrolling`属性可以设置为`"yes"`、`"no"`或`"auto"`，控制是否显示滚动条。而`onload`事件则可以在`<iframe>`内容...
设置`iframe`所在的网格项为`auto-fill`或`auto-fit`，并设置`minmax(0, auto)`来让`iframe`自动扩展。 ```css .iframe-container { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; }...
<iframe src="目标URL" width="宽度" height="高度" frameborder="边框" marginwidth="外边距宽度" marginheight="外边距高度" scrolling="滚动条" allowtransparency="透明度"></iframe> ``` 1. `src` 属性：这是`...
<iframe src="https://example.com" width="600" height="400"></iframe> ``` 在实际应用中，iframe的宽度和高度常常需要根据内容动态调整。"自适应高度"就是指iframe的高度能够自动适应其内部内容的高度，避免出现...
<iframe src="example.html" width="600" height="400" scrolling="auto"></iframe> ``` ##### 4. allowtransparency - **属性**: 控制Iframe背景是否透明。 - **取值**: true 或 false。 - **示例**: ```html ...
<iframe src="http://www.example.com" width="420" height="330" frameborder="0" scrolling="auto"> </iframe> ``` ##### 示例 2: 隐藏边框并禁用滚动条 ```html <iframe src=...
其中，`src`属性指定要加载的网页URL，`width`和`height`分别定义了iframe的宽度和高度。 ### iframe的应用场景 1. **内容聚合**：网站可以使用iframe展示来自不同来源的内容，如新闻、天气预报或者社交媒体动态。 ...
<iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe> ``` - `src`：指定要嵌入的文档的URL地址。 - `width` 和 `height`：分别指定IFrame的宽度和高度。 - `scrolling`：设置...
<iframe src="url" width="宽度" height="高度" frameborder="边框宽度" scrolling="滚动条" allowtransparency="是否透明"></iframe> ``` #### 属性详解 1. **src**: 这是`iframe`最重要的属性之一，用于指定被...
<IFRAME id="frame1" src="SourcePage.extension / URL of the external Site" scrolling="auto" runat="server"></IFRAME> ``` 其中，src 属性指定了要加载的外部页面或资源的 URL。 Step 2：在代码隐藏文件中声明...
这里的`src`属性指定要加载的页面URL，`width`和`height`属性定义了`iframe`的尺寸。 ### 2. 静态与动态高度 静态高度是直接在HTML中设置固定的`height`值，但这样无法适应内容变化。动态高度则需要根据`iframe`...
<iframe src="http://example.com" width="300" height="200"></iframe> ``` 然而，问题在于`iframe`的高度通常是固定的，如果嵌入的页面内容高度超过预设值，就会导致内容被截断。为了解决这个问题，我们需要实现`...
<iframe src="url" width="宽度" height="高度" frameborder="边框宽度" scrolling="是否显示滚动条" allowfullscreen="是否允许全屏"></iframe> ``` 2. **关键属性解释**： - `src`：指定要嵌入的源文档的URL。...
- `auto`：浏览器自动决定是否显示滚动条（默认值）。 - `yes`：强制显示滚动条，无论内容是否超出。 - `no`：禁止显示滚动条，内容超出部分不可见。 在尝试外部控制iframe滚动之前，理解这些默认行为至关重要，...
- `width` 和 `height`：用于设置`<iframe>`的宽度和高度。 - `marginWidth` 和 `marginHeight`：这两个属性在HTML5中已经被废弃，不建议使用。 - `frameBorder`：用于控制`<iframe>`边框的存在与否，默认值为1...
iframe.style.width = '100%'; iframe.style.height = winH + 'px'; iframe.style.border = '0 none'; iframe.setAttribute('scrolling', 'auto'); document.body.appendChild(iframe); ``` 而对于iOS设备，由于...