3

I am creating an application for dynamic graphs in html5 and javascript. I want my 4 graphs on the screen to be displayed as 4 quadrants on any device, this application works. This is code I have created

<!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>
garyh
  • 2,782
  • 1
  • 26
  • 28
pooja
  • 137
  • 1
  • 1
  • 7
  • your application "works". now what's the problem? – Yaje Jun 19 '14 at 06:36
  • 2
    He mentioned the question in the title. He wants to use percentages instead of exact pixel values for height and width. – Palash Jun 19 '14 at 06:44
  • Possible duplicate of [Full-screen iframe with a height of 100%](https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100) –  Jun 18 '17 at 00:17

2 Answers2

8

Yes you can provide height and width in % to iframe. Although there is a catch to it.

If you Give CSS to iframe like this

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

you will notice only the width attribute makes changes, The height attribute will not make any changes.

To make that work you have to specify height for the parents of iframe, in this case body and html . So your CSS would now be 

html,body{

    height: 100%;
}

iframe{
    width:60%;
    height:70%


}

Now changing height in iframe will reflect changes.

Here is a Fiddle

Mustafa sabir
  • 4,130
  • 1
  • 19
  • 28
4

2021 - update:

An easier solution would be to use flex so all 4 iframes will take up 25% of the viewport width:

div {
  display: flex;
}
iframe {
   min-width: 25%;
   height: 300px;
   border:1px solid red;
}
<div>
    <iframe src="file1.html" height="500" width="100%" frameborder="0"></iframe>
    <iframe src="file2.html" height="500" width="100%" frameborder="0"></iframe>
    <iframe src="file3.html" height="500" width="100%" frameborder="0"></iframe>
    <iframe src="file4.html" height="500" width="100%" frameborder="0"></iframe>
</div>

Original answer:

Use percentage instead of fix width:

<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

Barnee
  • 3,212
  • 8
  • 41
  • 53
  • width="100%" is not a valid value for the attribute in html5. I don't know whether browsers tolerate it, it seems they do, but it's not valid. – matteo Oct 27 '22 at 18:03