I am struggling to make this iframe fill 100% of its parent div, which has a width of 900px. The current code is not achieving the desired result.
Here is the HTML:
<fieldset>
<legend>Random Patch:</legend>
<iframe src="../../index.php?Patch_No='.$patches[$patch].'" frameborder="0" ></iframe>
</fieldset>';
In the CSS update, I tried setting the width of the iframe to 100%, but it didn't work as expected. Here is how it appears: https://i.sstatic.net/9cBw7.png
iframe {
width: 100%;
height: 500px;
}
Update 2 with the complete HTML:
<body>
<div id="wrapper">
<header>
<div id="menu"> <a href="new_patch/new_champions.php" id="new">NEW</a>
<!-- Editing patches still in works href="edit_patch.php" -->
<a id="edit" style="color: grey;" alt="Edit" title="Disabled still in works.">EDIT</a>
<a href="delete_patch.php" id="delete">DELETE</a>
<a href="logout.php" id="logout">LOGOUT</a>
</div>
</header>
<div id="sitelive">
<?php
//Generating random patch from DB
$sql="SELECT Patch_No FROM info";
$result=$ conn->query($sql);
$patches=$result->num_rows;
if($patches!=0) {
$patch = rand(1, $patches);
$i = 1;
$patches = array();
while($data=$result->fetch_assoc()){
$patches[$i] = $data['Patch_No'];
$i+=1;
}
echo '
<fieldset>
<legend>Random Patch:</legend>
<iframe src="../../index.php?Patch_No='.$patches[$patch].'" frameborder="0" height="500" width="100%" scrolling="no"></iframe>
</fieldset>';
} ?>
</div>
</div>
</body>