可以在html5標籤的iframe標籤中提供高度和寬度的百分比嗎？

我正在爲html5和javascript中的動態圖創建一個應用程序。我希望屏幕上的4個圖形在任何設備上顯示爲4個象限，此應用程序可以工作。這是我創造可以在html5標籤的iframe標籤中提供高度和寬度的百分比嗎？

<!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>

來源

2014-06-19 pooja

您的應用程序「作品」。現在有什麼問題？ – Yaje

他在標題中提到了這個問題。他希望使用百分比而不是高度和寬度的精確像素值。 – Maxzeroedge

[全屏iframe的高度爲100％]的可能重複（https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100） –

是的，你可以在%到IFRAME提供height和width代碼。雖然有一個問題。

如果你給CSS設置爲iFrame這樣

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

，你會發現只有width屬性進行更改，該height屬性不會做出任何改變。

爲了完成這項工作，您必須指定height作爲iframe的父項，在這種情況下爲body和html。所以，你的CSS現在是

html,body{ 

    height: 100%; 
} 

iframe{ 
    width:60%; 
    height:70% 


}

現在改變height在iframe中反映的變化。

這裏是一個Fiddle

來源

2014-06-19 08:16:36

感謝您的幫助..它的工作.. :) – pooja

歡迎，請標記爲答案，如果它證明有幫助 –

使用百分比，而不是固定寬度：

<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

來源

2014-06-19 08:36:04

可以在html5標籤的iframe標籤中提供高度和寬度的百分比嗎？

回答

相關問題