As I work in HTML, I'm faced with a challenge - my iFrame is only taking up a small section of the screen (referred to as 'World' in the example below).
What I want to achieve is creating a full-screen div overlay from that iFrame, but currently, the overlay is only wrapping around the iFrame and not extending to cover the entire screen. How can I adjust the code so that the div actually covers the full screen?
Code Example.
main.htm:
<!DOCTYPE html>
<html>
<body>
<table width=100% style='border:1px solid black;'>
<tr><td style='border:1px solid black;' width=50%>Hello</td><td style='border:1px solid black;' width=50%>
<iframe src=test2.htm>
</iframe>
</td></tr>
</table>
</body>
</html>
test2.htm:
<!DOCTYPE html>
<html>
<head>
<style>
.BigPhoto {
display: block;
z-index: 100;
background-color: red;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class=BigPhoto>World</div>
</body>
</html>
The expected result should have the red overlay covering the entire screen: https://i.sstatic.net/FnhEj.png