可以在 html5 标签的 iframe 标签中为高度和宽度提供百分比吗?

poo*_*oja 1 html iframe

我正在为 html5 和 javascript 中的动态图创建一个应用程序。我希望屏幕上的 4 个图形在任何设备上显示为 4 个象限,此应用程序有效。这是我创建的代码

<!DOCTYPE HTML>
<html>
<head>

<iframe src = "file.html" height="500" width="500" align = "left" frameborder = "0"> </iframe>


<iframe  src="file2.html" height="500" width="500" align = "middle" frameborder = "0"></iframe>
<iframe  src="file3.html" height="500" width="500"align = "middle" frameborder = "0"></iframe>

<iframe  src="file4.html" height="500" width="500"align = "middle" frameborder = "0"></iframe>


</head>
</html>
Run Code Online (Sandbox Code Playgroud)

Mus*_*bir 6

是的,你可以提供height,并width%对iframe中。虽然有一个问题。

如果你像这样给 iframe 提供 CSS

iframe {
width: 100%;
height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

你会注意到只有width属性发生了变化,height属性不会发生任何变化。

要完成这项工作,您必须为heightiframe 的父项指定,在本例中为bodyhtml. 所以你的 CSS 现在应该是

html,body{

    height: 100%;
}

iframe{
    width:60%;
    height:70%


}
Run Code Online (Sandbox Code Playgroud)

现在heightiframe 中的更改将反映更改。

这是一个 小提琴