Question

我正在为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>

Answer 1

是的，您可以在height中向iframe提供width和%。虽然有一个问题。

如果您像这样将iframe提供给iframe

iframe {
width: 100%;
height: 100%;
}

您会注意到只有width属性进行了更改，height属性不会进行任何更改。

要完成这项工作，您必须为iframe的父级指定height，在这种情况下为body和html。所以你的CSS现在是

html,body{

    height: 100%;
}

iframe{
    width:60%;
    height:70%


}

现在，更改iframe中的height将反映更改。

这是Fiddle

Answer 2

使用百分比代替修复宽度：

<iframe src="file.html" height="500" width="24%" align = "left" frameborder = "0"> </iframe>
<iframe src="file2.html" height="500" width="24%" align = "middle" frameborder = "0"></iframe>
<iframe src="file3.html" height="500" width="24%"align = "middle" frameborder = "0"></iframe>
<iframe src="file4.html" height="500" width="24%"align = "middle" frameborder = "0"></iframe>

的 Example

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

2 个答案: