`
liuxiang822
  • 浏览: 47897 次
  • 性别: Icon_minigender_1
  • 来自: 常州
社区版块
存档分类
最新评论

iframe高宽自适应

 
阅读更多 
<!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=utf-8" />
<title>iframe高宽自适应</title>
<style>
	html,body,.i_a{height:100%}
	body{margin:0}
	.i_a{width:100%;border:none}
</style>
</head>

<body>
	<iframe src="img_test.html" class="i_a"></iframe>
</body>
</html>

 

注意点：html,body{height:100%}

分享到：
| windows server 2008 产品密钥申请
评论
2 楼 liuxiang822 2012-01-11  
你上下都加了P标签 ，想要高度自适应很简单。给P标签高度加上百分比，然后加上iframe高度百分比等于body的高度百分比就行！
1 楼 and80506 2012-01-11  
<!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=utf-8" /> 
<title>iframe</title> 
<style> 
    html,body,.i_a{height:100%} 
    body{margin:0} 
    .i_a{width:100%;border:none} 
</style> 
</head> 
 
<body> 
<p>我是首页顶部</p>
    <iframe src="http://www.iwaimai.net" class="i_a"></iframe> 
<p>我是底部</p>
</body> 
</html> 
这个再测下看，会有滚动条的。  纯css是无法实现iframe高度自适应的。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于jquery的slide图片切换,高宽自适应.rar

    本插件支持一个页面多次使用，自动播放切换图片列表，具备图片预加载功能，重置图片宽度，可以自动适应图片的宽和高以适应指定的宽高，可以指定图片列表，指定切换...　飞飞图片宽高自适应的slide幻灯片切换jQuery插件

    jQuery实现布局高宽自适应的简单实例

    在现代网页设计中，实现页面布局的高宽自适应是一个常见需求。尤其是在响应式网页设计中，高宽自适应的实现尤为关键，以确保网站能够在不同尺寸的设备和屏幕上保持良好的布局和可读性。 文章首先提到了利用div和css...

    WPF tab宽度自适应 可关闭

    以下将详细讲解如何实现“WPF TabControl”的可关闭功能以及宽度自适应。 一、添加可关闭按钮 1. 创建一个新的`TabItem`模板：首先，我们需要创建一个自定义的`DataTemplate`，在其中添加一个可以关闭的按钮。通常...

    可变高宽的圆角框————html+css

    然而，如何创建一个既能保持圆角效果又能在不同屏幕尺寸下自适应的布局，一直是前端开发者的挑战之一。本文将基于给定的代码示例，深入解析如何使用HTML和CSS来实现可变高宽的圆角框。 #### 1. 圆角框的基本原理 ...

    纯Css实现Div高度根据自适应宽度（百分比）调整

    在如今响应式布局的要求下，很多能自动调整尺寸的元素能够做到高宽自适应，如img，通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整。 然而，用的最多的标签一哥Div却不能做到自动调整（要么从父级继承，...

    Hongru-Box 自定义的Js弹出层插件

    内容索引:脚本资源,Ajax/JavaScript,弹出层,DIV　...　高宽自适应内容高宽的box 　不带预载动画的box 　延迟自动消失的box 　title自定义的box 　不带标题栏的的box 　不带标题栏关闭按钮的box 　带按钮和回调参数的box

    css控制宽度（高度）自适应100%

    本篇将详细讲解如何使用CSS来实现宽度和高度的自适应100%效果，以满足不同屏幕尺寸和设备的需求。 1. **宽度自适应100%** 宽度自适应100%通常用于让元素占据其父容器的全部宽度，从而在不同分辨率和屏幕尺寸下保持...

    openBox插件动态弹出遮罩层,可关闭,多个实例.rar

    　不设任何options参数的box(默认弹出...　高宽自适应内容高宽的图片box 　不带预载动画的box 　延迟自动关闭的box 　title自定义的box 　不带标题栏的的box 　不带标题栏关闭按钮的box 　带按钮和回调参数的box

    Hongru-Box 点击鼠标弹出盒子的小插件

    内容索引:脚本资源,Ajax/JavaScript,弹出层,...　高宽自适应内容高宽的图片box 　不带预载动画的box 　延迟自动关闭的box 　title自定义的box 　不带标题栏的的box 　不带标题栏关闭按钮的box 　带按钮和回调参数的box

    什么是高宽课程.doc

    高宽课程是一种以儿童为中心，注重主动学习的幼儿园课程模式，它的核心理念是让孩子们通过积极参与，主动探索，从而对周围的世界产生高度的热情和广泛的兴趣。这种课程模式围绕着五个主要内容领域，即“学习方式”、...

    javascript firefox 自动加载iframe 自动调整高宽示例

    本示例主要讲解如何在Firefox和IE浏览器中实现`iframe`的自动加载和自动调整高宽。 首先，我们来看`AutoResize`这个函数，它的目的是根据`iframe`的内容窗口或文档来计算并设置`iframe`的高度和宽度。函数的参数是`...

    微信小程序-微信小程序图片自适应,微信小程序富文本解析

    小程序图片高宽没法自动适配，只能指定高宽进行裁剪。在详情页显示体验很差，用image组件的bindload解决 富文本解析 小程序没有提供富文本解析, 服务端可以转换为json(当然前端也可以有个js库解决html2json)在小程序...

    限定高宽压缩图片工具

    限定高宽压缩图片工具 1、在下工具的下面 点击“开始压缩”按钮 开始压缩。 2、添加文件夹时会子文件夹下的图片添加到列表里。 但是输出 直到一个你指定的文件夹下。 不会建立子文件夹。因此 主要子文件夹。 3、若...

    CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)

    本文将详细介绍如何使用CSS实现“左侧固定宽，右侧自适应”的布局，并确保兼容所有浏览器。这种布局常见于各种网站，比如博客、新闻网站或者含有侧边栏的页面。 首先，我们要明确“左侧固定宽，右侧自适应”的布局...

    Java爬虫+URL获取Img高宽.zip

    本项目“Java爬虫+URL获取Img高宽”专注于一个特定的应用场景，即通过Java爬虫从网页中提取图片（Img）的URL，并进一步获取这些图片的宽度和高度。这个功能在网站数据分析、图像处理或自动化测试等场景中具有重要...

    Jcrop照片剪裁插件高宽比例固定/剪裁效果预览演示

    本文将深入探讨Jcrop插件如何实现高宽比例固定的裁剪功能以及效果预览。 Jcrop的核心特性包括： 1. **交互性**：Jcrop提供了直观的拖动界面，用户可以通过鼠标拖动选择图片的裁剪区域，实时预览裁剪效果。 2. **...

    QQ主面板高宽限制解除工具

    腾讯QQ聊天工具，最新版本主面板高宽限制解除最新工具。

    CSS图片固定高宽显示

    让图片固定高宽显示，让图片显示的更好看，布局显得紧凑点

Magicbox
Global site tag (gtag.js) - Google Analytics