Question 45131 in Html Question posted in
Some basic documentation can be found here.

Make Iframe cover the full page – Html

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>
Tags:

4

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    We have property vh for get available window height.

    <iframe src="/static/HowToPay.pdf" width="100%" height="1000vh"></iframe>
    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
  4. 0

    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>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search