iframe定高情况下，背景颜色的设置问题_教程

实习的公司项目还在用iframe，因为不太熟悉这个，遇到了一些问题，记录一下。

项目里的iframe是一个有高度的容器。里面的内容可能不会充满页面，也可能超出iframe的高度，出现滚动条。

只在body上设置background-color的情况下，如果iframe没有被充满，iframe内html的高度只有内容那么高，留白的部分会显示默认颜色，而不是body的背景色。

尝试之后发现，给子页面html和body标签添加 min-height=100% 可以解决。

这样设置之后最小高度充满父容器，在内容不够多的情况下撑开高度，在内容超过iframe高度的情况下也正常适应。

如果想让iframe背景透明。这里需要用到iframe一个特殊的属性：allowtransparency="true"。1、首先在框架代码中加入allowtransparency属性：2、把嵌入iframe中的页面改为：楼主，你试试！应该可以解决！

直接通过设置backgroundColor的颜色即可：

<!DOCTYPE html>

<html>

<head>

function changeStyle()

{

var x=document.getElementById("myframe")

var y=(x.contentWindow || x.contentDocument)

if (y.document)y=y.document

y.body.style.backgroundColor="#0000ff"

}

</script>

</head>

<body>

<p>Your browser does not support iframes.</p>

</iframe>

<input type="button" onclick="changeStyle()"

value="Change background color">

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

iframe定高情况下，背景颜色的设置问题