Make Iframe cover the full page - html

Question

I have an iframe that embeds a pdf from a folder into the website. I want that iframe to cover the full page. I did width: 100%, and that covered the page for width, but if I do height: 100%, it doesn't even cover half of the page. How can I cover the full page with an iframe. One last thing, I have checked other answers and those don't help me, I have also tried to use embed and object tags but those don't work either.
The line of code:
<iframe src="/static/HowToPay.pdf" width="100%" height="1000px"></iframe>

Answer 1

use this CSS that set the height and cover the full page
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
<iframe src="/static/HowToPay.pdf" width="100%"></iframe>

Answer 2

We have property vh for get available window height.
<iframe src="/static/HowToPay.pdf" width="100%" height="1000vh"></iframe>

Answer 3

Did you try using vh and vw units within a style attribute?
<iframe src="/static/HowToPay.pdf" style="width: 100vw; height:100vh;"></iframe>
You can check the preview by running the snippet

Answer 4

Pervious answers offer ссs solution but I want to suggest Fullscreen API. Maybe will be usefull
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
Easy way to use it is react-full-screen: https://www.npmjs.com/package/react-full-screen
function App() {
const handle = useFullScreenHandle();
return (
<div>
<button onClick={handle.enter}>
Enter fullscreen
</button>
<FullScreen handle={handle}>
Any fullscreen content here
</FullScreen>
</div>
);
}