iframe width is too large

Freddy Estis 0
Viewed 30

I'm trying to make an iframe that stretches to the full width and height of the page but when using "width:100%" I get a too large iframe as shown in the image.

enter image description here

This is the code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <style>
  </style>
  <body>

    <h2>Text example to show that the width is too large and the content is out of it</h2>
    <div class="container-fluid">
            <iframe src="index.php" style="width:100%;height:1500px;overflow:hidden; border:none;"></iframe>
    </div>
  </body>
</html>

twitter-bootstrap css html
1 Answers

Most likely the container element (body, main, content, whatever) has a left and right padding. Use the browser tools to inspect alle lements that could be responsible for that. If you find it, try to remove that padding. If you can't for some reason, use width: 100vw for the iframe and apply a negative margin-left to it that has the same value (but negative) as the left-padding of the container element.

So, for example, if there is a padding-left: 30px on the body, apply margin-left: -30px (and width: 100vw) to that iframe.

userhGFn0
Related