iframe自适应高度设置（iframe自适应高度和宽度）
您好,现在我来为大家解答以上的问题。iframe自适应高度设置，iframe自适应高度和宽度相信很多小伙伴还不知道,现在让我们一起来看看吧！1... 您好,现在我来为大家解答以上的问题。iframe自适应高度设置，iframe自适应高度和宽度相信很多小伙伴还不知道,现在让我们一起来看看吧！ 1、在文件夹里创建两个html文件，一个“index”一个“iframe”。 2、2、在index中添加一个iframe标签，直接嵌入iframe页面。 3、3、在iframe网页中添加了两个固定高度的div内容。 4、4、浏览器打开index页面我们发现iframe部分有滚动条，需要滚动显示页面。 5、5、现在我们在index页面的iframe标签再添加如下的属性。 6、6、再次打开index页面iframe已经高度自适应了。
怎么让iframe自适应浏览器的高度和宽度
让iframe自适应浏览器的高度和宽度的具体步骤如下： 1、首先设置样式：body{margin:0; padding:0;}。 2、如果不设置body的margin和padding为0的话，页面上下左右会出现空白。 代码如下：。 3、这个方法可以达到让iframe自适应高度的效果，但是如果将窗口放大或缩小效果就不出来了，也就是本文开头讲的。 需要再次刷新，那就不属于自适应了。 代码是： var ifm= document.getElementById("myiframe"); ifm.height=document.documentElement.clientHeight;
请求html前端高手，网页如何使用定制宽度的iframe呢？
1，在iFrame的包含页面里加入
html { overflow-x:hidden; overflow-y:auto; }
2，给iframe加上样式--用于兼容FF
如
3，还要在包含页面中加段JS来解决IE6的BUG--即竖向滚动条的17px
function ifrIe6PageW(){
if (get_navigator() == "IE:6.0"){
var iframeH = window.parent.document.getElementById("my_iframe").clientHeight;
var iframeW = window.parent.document.getElementById("my_iframe").clientWidth;
var pageH=document.body.scrollHeight;
if (pageH >= iframeH){
document.body.style.width=(iframeW - 17)+"px";
}
}
}
html5框架iframe高度和宽度比例如何设置。
可以用jQuery获取到当前的窗口的宽度，来计算iframe的宽和高，示例代码如下：$(document).ready(function() { var ifr_width=$(window).width()*0.75; $("#demo").css('width',ifr_width); $("#demo").css('height',ifr_width*0.75);});jQuery中获取当前窗口的宽度代码是：$(window).width();
html中frame有什么用？
不知道你说的是框架集(frameset)还是浮动框架(iframe)
框架集(frameset)下有frame；可以实现类似于windows资源管理器的效果。把整个页面分成几个框架，即多个frame.当你点击左侧的导航时，可以在右侧窗口中显示对应的内容。注意:每个frame对应显示一个网页内容。
浮动框架(iframe):是镶嵌在一个网页中的另一个网页。相当网页中又嵌套了一个窗口。
html网页中如何调用另一个html网页的一部分
扩展资料：参数url,[data,[callback]]String,Map/String,CallbackV1.0url:待装入 HTML 网页网址。data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。callback:载入成功时回调函数。示例1、描述:加载文章侧边栏导航部分至一个无序列表。HTML 代码:jQuery Links:jQuery 代码:$("#links").load("/Main_Page #p-Getting-Started li");2、描述:加载 feeds.html 文件内容。jQuery 代码:$("#feeds").load("feeds.html");
用div+css做的网页，用火狐测试为什么div走到上边去了
出现这种问题有可能有两种情况：
1、footerdiv或者其它div没有添加清除浮动的css属性，试试添加clear:both;
2、还有一点是页面源代码中的某个标签没有正确闭合标签，你仔细查看一下，是不是哪个标签没有正确结束标签。 比如标签没有用关闭，标签没有用关闭，标签没有用关闭等等，使用dreamweaver等网页编辑工具查看，没有正确闭合而出错的地方会呈现城黑色。需要仔细慢慢检查。
如还有问题请再联系我。 我的baidu hi在线。
怎么单独解决火狐div+css兼容问题
应该在写html的时候，在火狐中预览，写好后，在考虑ie兼容的问题，没有简单的代码，就可以才能单独地控制火狐，下面是总结的css hack，你仔细看看
希望可以帮到你。
一，由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。
CSS Hack的原理是什么
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，当不能识别下划线"_"，而firefox两个都不能认识。等等
书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。
如何写CSS Hack
比如要分辨IE6和firefox两种浏览器，可以这样写：
div{
background:green; /* for firefox */
*background:red; /* for IE6 */
}
我在IE6中看到是红色的，在firefox中看到是绿色的。
解释一下：
上面的css在firefox中，它是认识不了后面的那个带星号的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。
CSS hack:区分IE6，IE7，firefox
区别不同浏览器，CSS hack写法：
区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green;_background:blue;
background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6 IE7 FF
* √ √ ×
!important × √ √
浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6
以: " #demo {width:100px;} "为例;
#demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/
* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
*+html #demo {width:130px;} /*会被IE7执行*/
---------------
所以最后,#demo的宽度在三个浏览器的解释为:
FIREFOX:100px;
ie6:120px;
ie7:130px;、
二，对于ul form等在浏览器中是有默认属性的。IE中默认的是margin，但是FIREFOX中默认的是padding。所以在进行定义的时候，为了防止页面结构在不同浏览器中有变化，对ul form等进行设置时应该有如下设置ul，form{ margin：0；padding：0；}
三，IE条件注释功能
1，如果想让html页面中的某一块只在ie中显示可以
只有IE能显示此块
那么里边的内容只有在IE浏览器中才能被显示，但是在FF或其他浏览器中显示不出来。
那么只有IE6能显示此块
2，从IE5.0到IE7都能支持此注释功能。并且可精确到小数点后四位。如
只有IE5.1能显示此块
3，条件注释前可加前缀，用于判断更高或更低版本。如：
只有IE5以上版本能显示此块（不包括IE5）
只有IE5及以上版本能显示此块（包括IE5）
只有IE7以下版本能显示此块（不包括IE7）
只有IE7及以下版本能显示此块（包括IE7）
注意：此注释写在html文件中，而不是css文件中
四，CSS Hack 汇总快查
屏蔽IE浏览器（也就是IE下不显示）
*:lang(zh) select {font:12px !important;} /*FF,可见，特别提醒：由于Opera最近的升级，目前此句只为FF所识别*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。
仅IE7与IE5.0可以识别
*+html select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
仅IE7可以识别
*+html select {…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
IE6及IE6以下识别
* html select {…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body select {…}
这句与上一句的作用相同。
仅IE6不识别，屏蔽IE6
select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
仅IE6与IE5不识别，屏蔽IE6与IE5
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5
仅IE5不识别，屏蔽IE5
select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。
盒模型解决方法
selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
清除浮动
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。
截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。
只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。
IE5.x的过滤器，只有IE5.x可见
@media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
IE5/MAC的过滤器，一般用不着
/*\*//*/
@import "ie5mac.css";
/**/
<iframe src="top1.html" frameBorder="0" width="900" scrolling="no" height="90"></iframe>
通过js 来控制自适应高度；
html代码：
js代码：
function iFrameHeight() {
var ifm= document.getElementById("iframepage");
var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}
楼主怎么不用DIV+CSS来布局？ 那样不是灵活很多么。。
